Question

我有一个清单：

<ul>
    <li>
        <span class="first">the dog jumped over the fox</span>
        <span class="second">1</span>
        <span class="third">Edit</span>
    </li>
    <li>
        <span class="first">cat and mouse</span>
        <span class="second">1</span>
        <span class="third">Edit</span>
    </li>
    <li>
        <span class="first">doggie</span>
        <span class="second">1</span>
        <span class="third">View report</span>
    </li>        
</ul>

我希望将每个中第一个<li>的宽度设置为等于文本最长的一个。在这种情况下，最长的文字是＃34;狗跳过狐狸＆＃34;所以我希望所有其他匹配它。我还想对<li>中的任何其他应用相同的逻辑。基本上，所有具有相同的长度，所有具有相同的长度，并且所有{{1}}具有相同的长度。这就是我想要实现的目标：

-------------------------------------------
the dog jumped over the fox |1|Edit       |
-------------------------------------------
cat and mouse               |1|Edit       |
-------------------------------------------
doggie                      |1|View report|
-------------------------------------------

谢谢！

Answer 1

如下所示应用CSS。

 ul{display:table; width:100%; padding:0;}
 li{display:table-row;}
 li span{display:table-cell; text-align:left;}

DEMO

Answer 2

如何使用<table>？

See this fiddle.

HTML

<table>
    <tr>
        <td>the dog jumped over the fox</td>
        <td>1</td>
        <td>Edit</td>
    </tr>
    <tr>
        <td>cat and mouse</td>
        <td>1</td>
        <td>Edit</td>
    </tr>
    <tr>
        <td>doggie</td>
        <td>1</td>
        <td>View report</td>
    </tr>        
</table>

Answer 3

您必须将li设置为display：block;并至少浮动第一个跨度，然后给它一定的宽度。 Haven没有对crossbrowser兼容性进行测试，但它应该可行。演示：http://jsfiddle.net/fdhu0w07/

`
ul {
    display: block;
}
ul li {
    display: block;
}

ul li span {
    display: inline-block;
}

ul > li > span:first-of-type{
    float: left;
    width: 220px;
}`

Answer 4

将您的列表放在html中的表格中。

<table>

<ul>
  <li>
    <span class="first">the dog jumped over the fox</span>
    <span class="second">1</span>
    <span class="third">Edit</span>
  </li>
  <li>
    <span class="first">cat and mouse</span>
    <span class="second">1</span>
    <span class="third">Edit</span>
  </li>
  <li>
    <span class="first">doggie</span>
    <span class="second">1</span>
    <span class="third">View report</span>
  </li>        
  </ul>

</table>

然后在你的CSS中

table{
table-layout: fixed;
width: 300px;
}

像素宽度可以由你决定！

祝你好运！

css ul和li - 每个li中的多个跨度以及如何垂直排列跨度

4 个答案: