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

Question

有没有更好的方法来编写水平列表，其中列表项是可变的并且最后一个列表项右对齐。我已对其进行设置，以便在长文本项的中心断开单词。

优点:

• 一切都在同一条线上
• 符合 UL

缺点:

• 分词，在这种情况下，文本难以阅读
• 修改 LI first-child 使其向左浮动以折叠其宽度

这是 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>