слишком большая граница элемента li

Question

Я пытаюсь оформить неупорядоченный список со следующими элементами:

ul {
  list-style: none;
}

ul.bullet li {
  font-size: 20px;
  line-height: 50px;
  border: solid 1px cyan;
  padding: 5px;
  margin: 5px;
}

<h2 style="margin-left: 28px;">I make awesome stuffs with</h2>
<ul class="bullet">
  <li>Python</li>
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
  <li>Node.js</li>
  <li>Unix shell scripting</li>
</ul>

Границы элементов списка go до крайнего правого края страницы примерно так -

Может кто-нибудь подсказать, как можно уменьшить размер рамки, чтобы она охватывала только слово. Заранее спасибо.

Answer 1

Вы пытались использовать тег <span>? Обратите внимание, что когда вы применяете стилизацию к тегу <li>, вы должны понимать, что его размер не ограничивается текстом, который вы в него вставляете.

 ul{
    list-style: none;
    }

    ul.bullet li {
        list-style-position: inside;
        margin: 0;
        font-size: 20px;
        line-height: 50px;
    }
   

    ul.bullet li span {
        border: solid 1px cyan;
        padding:5px;
        margin:5px;
}

<h2 style="margin-left: 28px;">I make awesome stuffs with</h2>
<ul class="bullet">
  <li><span>Python</span></li>
  <li><span>HTML</span></li>
    <li><span>CSS</span></li>
    <li><span>Javascript</span></li>
    <li><span>Node.js</span></li>
    <li><span>Unix shell scripting</span></li>
</ul>

Answer 2

Это именно то, что вам нужно, брат ...

HTML

<h2 style="margin-left: 28px;">I make awesome stuffs with</h2>
<ul class="bullet">
    <li><a href="#">Python</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">Javascript</a></li>
    <li><a href="#">Node.js</a></li>
    <li><a href="#">Unix shell scripting</a></li>
</ul>

CSS

ul.bullet li{
    list-style: none;
}

ul.bullet li a{
    font-size: 20px;
    line-height: 50px;
    border: solid 1px cyan;
    padding:5px;
    margin:5px;
    text-decoration:none;
}