我有一个列表,其中包含我li
标记的:before
伪元素content
属性中定义的不同长度的标题。 li
标签本身的内容也有不同的长度。
由于标题的长度各不相同,我使用了各种display: table
属性来保持内容对齐。一些相关位在下面,click here for a full sample。
ul {
display: table;
margin: 0;
padding: 0;
border-collapse: seperate;
border-spacing: 0 2px;
}
li {
display: table-row;
list-style: none;
margin: 0;
padding: 0;
}
li:before {
display: table-cell;
font-weight: bold;
margin: 0;
padding-right: 5px;
text-align: right;
width: 1px;
white-space: nowrap;
}
A注意:最初提议使用
width
伪元素而不是:before
方法的display: table
属性作为行解决方案提升内容,但标题的不同长度使我们远离该方向,因此标题栏可以与允许的内容一样窄或宽,而不是基于固定的指标。
然后提出了这个想法,只有标题的背景,从内容延伸,如下:
甚至这样的东西,不太受欢迎,但如果有两种解决方案,可能会为社区带来一些规范的好处:
只需在background-color
上加:before
即可使背景延伸li
实际内容的全部高度。
我们在position: absolute
伪元素上使用:before
获得了一些运气,但后来我们回到设置固定宽度来定位相对于标题的内容,我们试图避免从快走吧。
ul
/ li
结构来完成此任务?答案 0 :(得分:1)
float
和table-cell
的某种组合,可以实现。
情景1:
ul {
display: table;
margin: 0;
padding: 0;
border-collapse: seperate;
border-spacing: 0 2px;
}
li {
display: table-row;
list-style: none;
margin: 0;
padding: 0;
}
li:before {
display: table-cell;
font-weight: bold;
margin: 0;
padding-right: 5px;
text-align: left;
white-space: nowrap;
background-color: #ddd;
height: auto;
float:left;
width: 100%;
}
.li1:before {
content: "I AM PRETTY LONG";
}
.li2:before {
content: "SHORT";
}
.li3:before {
content: "MEDIUM LEN";
}
div {
display:table-cell;
background-color: #ddd;
vertical-align: top;
}

<ul>
<li class="li1"><div>Nunc egestas purus vel dui lacinia imperdiet. Nam gravida maximus purus, in ornare turpis pretium at. Suspendisse potenti. Donec condimentum ornare pharetra.</div></li>
<li class="li2"><div>Praesent imperdiet non arcu pellentesque condimentum.</div></li>
<li class="li3"><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam iaculis condimentum odio, et lobortis metus congue vitae. Nam tellus dolor, consequat eget tellus eu, congue congue felis. Donec eget ipsum commodo, porttitor libero eu, dignissim ligula. Proin vel porta lorem. Vivamus varius risus ac venenatis efficitur. Quisque sit amet tellus sed neque tincidunt pharetra. </div></li>
</ul>
&#13;
情景2:
ul {
display: table;
margin: 0;
padding: 0;
border-collapse: seperate;
border-spacing: 0 2px;
}
li {
display: table-row;
list-style: none;
margin: 0;
padding: 0;
}
li:before {
display: table-cell;
font-weight: bold;
margin: 0;
padding-right: 5px;
text-align: left;
white-space: nowrap;
background-color: #ddd;
height: auto;
float:right;
}
.li1:before {
content: "I AM PRETTY LONG";
}
.li2:before {
content: "SHORT";
}
.li3:before {
content: "MEDIUM LEN";
}
div {
display:table-cell;
background-color: #ddd;
vertical-align: top;
}
&#13;
<ul>
<li class="li1"><div>Nunc egestas purus vel dui lacinia imperdiet. Nam gravida maximus purus, in ornare turpis pretium at. Suspendisse potenti. Donec condimentum ornare pharetra.</div></li>
<li class="li2"><div>Praesent imperdiet non arcu pellentesque condimentum.</div></li>
<li class="li3"><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam iaculis condimentum odio, et lobortis metus congue vitae. Nam tellus dolor, consequat eget tellus eu, congue congue felis. Donec eget ipsum commodo, porttitor libero eu, dignissim ligula. Proin vel porta lorem. Vivamus varius risus ac venenatis efficitur. Quisque sit amet tellus sed neque tincidunt pharetra. </div></li>
</ul>
&#13;
答案 1 :(得分:1)
分别在lapply(lapply(split.distances, hclust), cutree)
,display: table
和内部元素上使用display: table-row
,display: table-cell
和<ul>
即可完成此操作。这具有将标题存储在HTML而不是CSS中的额外好处。
<强> HTML 强>
<li>
<强> CSS 强>
<ul>
<li>
<h3><span>A Really Long Title Here</span></h3>
<p>Lorem ipsum dolor sit amet, tractatos erroribus conceptam an sed. Inani dicant graeci id duo, vero perfecto maluisset ut eos. Agam veri ubique ne mei, ferri perpetua prodesset duo an, nam quas everti commune te. At justo dicant similique vel.</p>
</li>
<li>
<h3><span>A Medium Title</span></h3>
<p>Lorem ipsum dolor sit amet, tractatos erroribus conceptam an sed. Inani dicant graeci id duo, vero perfecto maluisset ut eos..</p>
</li>
<li>
<h3><span>Title<span></h3>
<p>Lorem ipsum dolor sit amet, tractatos erroribus conceptam an sed.</p>
</li>
</ul>
<强>结果强>
完整demo。