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

【问题标题】：css ul and li - multiple spans in each li and how to line up the spans verticallycss ul 和 li - 每个 li 中的多个跨度以及如何垂直排列跨度
【发布时间】：2014-10-25 07:54:13
【问题描述】：

我有一个清单：

<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> 中第一个 的宽度设置为等于文本最长的那个。在这种情况下，最长的文本是“狗跳过狐狸”，所以我希望所有其他 s 都匹配它。我还想将相同的逻辑应用于<li> 中的任何其他s。基本上，所有 长度相同，所有 长度相同，所有 长度相同。这是我想要实现的目标：

------------------------------------------ 狗跳过狐狸|1|编辑| ------------------------------------------ 猫和老鼠|1|编辑| ------------------------------------------ 小狗 |1|查看报告| ------------------------------------------

谢谢！

【问题讨论】：

您只想在 ul 中使用它？或者你也可以在桌子上使用它吗？因为您的要求与表格概念相似？
这是使用table 和tr,td 功能的理想场景
这是在左侧导航中，它正在使用<ul>

标签： html css html-lists vertical-alignment

【解决方案1】：

使用<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>

【讨论】：

【解决方案2】：

将您的列表放在 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;
}

像素宽度可以由你决定！

祝你好运！

【讨论】：

【解决方案3】：

你必须将 li 设置为 display: block;并至少浮动第一个跨度，然后给它一定的宽度。尚未测试跨浏览器兼容性，但它应该可以工作。演示：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;
}`

【讨论】：

跨度的宽度可能必须是动态的。

【解决方案4】：

像下面这样应用 CSS。

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

DEMO

【讨论】：