Как вертикально выравнивать элементы элемента списка HTML?

Question

У меня есть следующий 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> 

Это делает, как это (я преувеличил «по электронной почте & сотрудничества» текст для проблемы, чтобы быть более заметным):

* email and co: email@example.com 
* XMPP: xmpp@example.com 

Я хотел бы, чтобы сделать это в несколько красивее образом, совместив как электронная почта и XMPP адрес, более или менее, как это:

* email and co: email@example.com 
* XMPP:   xmpp@example.com 

(или SOMET hing подобный).

Я пытался играть с display: table и друзьями не повезло: он кажется <a> тег дует все вверх :(

Это мой текущий Fiddle:. http://jsfiddle.net/xL314Lkt/ с неработающего раствором Если удалить <a> тег , это, кажется, хорошо, но я на самом деле нужно, и я ищу решение (если это возможно), которые:.

• сохраняет содержимое семантически правильный или лучший вид правильно (как я не хочу разделить <a> на две части.)
• не устанавливает фиксированную ширину ни для одного из элементов, я бы накладывал метки на одно и то же пространство, но также позволял им естественным образом (и сохраняя визуальную правильность, играя с полями и прокладками). Собственно, это все вещи оказываются в пространстве не так ширины, поэтому помимо естественного потока я должен держать вещи в минимуме.

Answer 1

Вы должны изменить якорь тега display свойство block:

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; 
} 

Answer 2

Если вы готовы сделать этикетку фиксированной ширины:

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

Затем установите свой CSS:

.listLabel, 
.listSpan { 
    display:inline-block; 
    vertical-align:top; 
} 

.listLabel { 
    width:100px; 
} 

Это должно придать внешний вид, который вы ищете.

Answer 3

Ваш лучший выбор - просто добавить минимальную ширину.

<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

ul { 
    display: table; 
} 

li { 
    display: table-row; 
} 

span.label, 
span.value { 
    display: table-cell; 
} 

.label { 
    min-width: 100px; 
} 

Answer 4

Вы должны использовать список определений, это семантически болееправильно:

<dl> 
    <dt>email and co</dt> 
    <dd>email@example.com</dd> 
    <dt>XMPP</dt> 
    <dd>xmpp@example.com</dd> 
</dl> 

CSS может выглядеть следующим образом:

dt 
{ 
    float:left; 
    clear:both; 
    min-width:38em; 
} 
dd { 
    float:left; 
} 

Answer 5

Если вы готовы использовать 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"; 
} 

JSFiddle