Question

＆＃13;

.selectlist {
    width: auto;
    display: inline-block
  }
  .selectlist li {
    width: 60px;
    cursor: pointer;
    position: relative;
    left: 0;
    background-color: #EEE;
    margin: .5em;
    padding: .3em 0;
    height: 1.6em;
    border-radius: 4px;
  }

＆＃13;

    <ul class="selectlist">
        <li>this is line test 1</li>
        <li>this is line 2</li>
        <li>this is line 3</li>
    </ul>

＆＃13;

我正在尝试修改以下make <li>或<ul>元素以仅适合CSS的给定文本的长度。 width: auto使元素占据整个屏幕宽度。

.ul {
    margin: 0 0 2em 0;
    list-style-type: none;
    padding: 0;
    width: auto;
}
.ul li {
    width: auto;
    cursor: pointer;
    position: relative;
    left: 0;
    background-color: #EEE;
    margin: .5em;
    padding: .3em 0;
    height: 1.6em;
    border-radius: 4px;
}

如果不能使列表适合文本的长度，那么我可以通过修改上面的CSS使文本适合元素的给定宽度吗？

更新：感谢所有的答复。上面的代码格式列出了看起来像矩形的项目。

我尝试了你所有的建议，文字包裹在第二行，它出现在矩形形状之外。我刚刚意识到我的问题仅限于上面的代码场景，而不是一般的代码场景。

请参阅代码段。我想要固定长度的矩形并使文本适合它。

Answer 1

在包含已定义范围的行的容器中执行列表。它将自动开始一个新行，而不是切断你的文本。

Answer 2

将.ul类设置为display:inline-block

设置元素以适合文本的长度

2 个答案: