Question

是否有更好的方法来编写水平列表，其中列表项是可变的，最后一个列表项对齐。我已经设置好了，因此对于长文本项，单词会中断。

PROS：

一切都在同一条线上
适合UL

CONS：

单词休息，如果文字很难阅读
将李先生的第一个孩子挪到左边以便折叠其宽度

这是Fiddle！

<ul class="horizontal">
    <li>
        <i class="fa fa-picture-o fa-3x"></i>
    </li>
    <li>My Title
        <br/>
        <a href="#" class="break-all" title="This long title - 9" rel="tooltip" data-toggle="tooltip" data-placement="bottom">This long title - 9</a>
        <span>(87)</span>
    </li>
    <li>
        <a href="#">Change</a>
    </li>
</ul>

ul.horizontal {
margin:0;
padding:0;
width:100%;
}

ul.horizontal > li {
list-style:none;
display:table-cell;
vertical-align:top;
margin:0;
padding:2px;
}
ul.horizontal > li:first-child {
float:left;
}
ul.horizontal > li:last-child {
width:1%;
}
ul.horizontal > li > a {
outline:none;
text-decoration:underline;
color: #444;
}
ul.horizontal > li.vertical-middle {
line-height: 40px;
}
.break-all{ 
word-break:break-all;
}

/* misc */
ul {
font: normal 0.9em/1.5em arial, geneva, sans;
}

Answer 1

当然还有flexbox。

* {
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
  display: flex;
  align-content: center;
  margin: 10px;
}

li {
  flex:1;
  border:1px solid green;
  text-align: center;
}

li:first-child,
li:last-child {
  flex: 0 0 auto;
  display: flex;
 align-items: center;
}

li:nth-child(2) {
  text-align:left;  
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet"/>
<ul class="horizontal">
  <li>
    <i class="fa fa-picture-o fa-3x"></i>
  </li>
  <li><p>My Title</p>
    <a href="#" class="break-all" title="This long title - 9" rel="tooltip" data-toggle="tooltip" data-placement="bottom">This long title - 9</a>
    <span>(87)</span>
  </li>
  <li>
    <a href="#">Change</a>
  </li>
</ul>

CSS水平列表适合UL内部可变宽度

1 个答案: