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

Posted 2023-03-05

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

【英文标题】：css ul and li - multiple spans in each li and how to line up the spans vertically

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

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

谢谢！

【问题讨论】：

您只想在 ul 中使用它？或者你也可以在桌子上使用它吗？因为您的要求与表格概念相似？

这是使用table 和tr,td 功能的理想场景

这是在左侧导航中，它正在使用<ul>

【参考方案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。

 uldisplay:table; width:100%; padding:0;
 lidisplay:table-row;
 li spandisplay:table-cell; text-align:left;

DEMO