[英]How to vertically align parts of HTML list item?
I have the following HTML (which I control): 我有以下HTML(由我控制):
<ul>
<li>
<a href="mailto:email@example.com">email and co: email@example.com</a>
</li>
<li>
<a href="xmpp:xmpp@example.com">XMPP: xmpp@example.com</a>
</li>
</ul>
This renders like this (I exaggerated the "email & co" text for the problem to be more visible): 如下所示(为了使问题更明显,我夸大了“ email&co”文本):
* email and co: email@example.com
* XMPP: xmpp@example.com
I would like to render this in a slightly prettier way by aligning both email and XMPP address, more or less like this: 我想通过对齐电子邮件和XMPP地址,以某种更漂亮的方式呈现此信息,大致如下所示:
* email and co: email@example.com
* XMPP: xmpp@example.com
(or something similar). (或类似的内容)。
I tried to play with display: table
and friends with no luck: it seems the <a>
tag blows everything up :( 我试着玩
display: table
和没有运气的朋友:似乎<a>
标签炸毁了所有东西:(
This is my current Fiddle: http://jsfiddle.net/xL314Lkt/ with a non-working solution. 这是我当前的小提琴: http : //jsfiddle.net/xL314Lkt/,有一个不起作用的解决方案。 If I remove the
<a>
tag, it seems to be OK, but I really need it, and I'm looking for a solution (if possible) which: 如果删除
<a>
标记,似乎还可以,但我确实需要它,并且正在寻找一种解决方案(如果可能):
<a>
in two parts.) <a>
分为两部分。) You need to change the anchor tag's display
property to block
: 您需要将锚标记的
display
属性更改为block
:
Codepen: http://codepen.io/erquhart/pen/wJcCK Codepen: http ://codepen.io/erquhart/pen/wJcCK
<ul>
<li>
<a href="mailto:email@example.com">email and co: <span>email@example.com</span></a>
</li>
<li>
<a href="xmpp:xmpp@example.com">XMPP: <span>xmpp@example.com</span></a>
</li>
</ul>
a {
display: block;
width: 300px;
}
span {
float: right;
}
If you are willing to make the label a fixed width: 如果您愿意将标签设置为固定宽度:
<ul>
<li>
<a href="mailto:email@example.com">
<label class="listLabel">email and co:</label>
<span class="listSpan">email@example.com
</a>
</li>
<li>
<a href="xmpp:xmpp@example.com">
<label class="listLabel">XMPP:</label>
<span class="listSpan">xmpp@example.com</span>
</a>
</li>
</ul>
Then set your CSS: 然后设置您的CSS:
.listLabel,
.listSpan {
display:inline-block;
vertical-align:top;
}
.listLabel {
width:100px;
}
This should give the appearance you're looking for. 这应该给您想要的外观。
Your best bet will be to just add a min-width. 最好的选择是添加一个最小宽度。
<ul>
<li>
<a href="mailto:email@example.com">
<span class="label">email and co:</span>
<span class="value">email@example.com</span>
</a>
</li>
<li>
<a href="xmpp:xmpp@example.com">
<span class="label">XMPP:</span>
<span class="value">xmpp@example.com</span>
</a>
</li>
</ul>
CSS CSS
ul {
display: table;
}
li {
display: table-row;
}
span.label,
span.value {
display: table-cell;
}
.label {
min-width: 100px;
}
You should use definition list , this is semantically more correct : 您应该使用定义列表 ,从语义上来说这是更正确的 :
<dl>
<dt>email and co</dt>
<dd>email@example.com</dd>
<dt>XMPP</dt>
<dd>xmpp@example.com</dd>
</dl>
CSS could look like: CSS可能如下所示:
dt
{
float:left;
clear:both;
min-width:38em;
}
dd {
float:left;
}
If you are willing to use javascript you could do: 如果您愿意使用javascript,可以执行以下操作:
//retrieve all elements you wish to match width
var labelElement = document.getElementsByClassName("label");
var maxWidth = 0;
var elementWidth;
//Loop through the elements to get the maximum width
for (var i = 0; i < labelElement.length; ++i) {
elementWidth = parseInt(labelElement[i].offsetWidth);
maxWidth = elementWidth > maxWidth ? elementWidth : maxWidth;
}
//Set the new width for all elements, +1 to avoid linebreak
for (var i = 0; i < labelElement.length; ++i) {
labelElement[i].style.width = "" + (maxWidth+1) + "px";
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.