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>

列表元素上的边框像这样向上移动到页面的最右边-

任何人都可以指导我如何减小边框大小，以便仅将单词包裹起来。预先感谢。

Answer 1

这正是您需要的...

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;
}

Answer 2

您是否尝试过使用<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>