центрирования элементов на основе позиции символа

Question

У меня есть выпадающий выберите элемент, как

USA - New York 
India - Delhi 
Canada - Ottawa 
Finland - Helsinki 
Luxembourg - Luxembourg 

Я хочу, чтобы центрировать элементы на основе символа «-» позиции. Я выполнил этот присваивающий идентификатор каждому из этих элементов и переместил элемент, который отлично работает, но не динамический, поскольку я изменяю или добавляю элемент, который я должен изменить. Есть ли способ центрировать элементы, основанные на позиции символа «-»?

Ожидаемый результат:

 USA - New York 
    India - Delhi 
    Canada - Ottawa 
    Finland - Helsinki 
Luxembourg - Luxembourg 

http://plnkr.co/edit/Ys0urVnQlFASTudGOsdh?p=preview

Answer 1

Вы должны добавить элементы внутри тега, но в соответствии с MDN вы только позволили добавить в него текст. Вы должны рассмотреть возможность использования другого типа выпадающего меню:

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-6"> 
      <div class="dropdown"> 
       <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Dropdown 
       <span class="caret"></span></button> 
       <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"> 
        <li role="presentation"> 
         <a href="#"><div class="row"> 
          <div class="col-xs-5 text-right">USA</div> 
          <div class="col-xs-1 text-center">-</div> 
          <div class="col-xs-5 text-left">New York</div> 
          </div></a> 
        </li> 
        <li role="presentation"><a href="#"> 
         <div class="row"> 
          <div class="col-xs-5 text-right">Delhi</div> 
          <div class="col-xs-1 text-center">-</div> 
          <div class="col-xs-5 text-left">India</div> 
         </div></a> 
        </li> 
        <li role="presentation"><a href="#"> 
         <div class="row"> 
          <div class="col-xs-5 text-right">Ottawa</div> 
          <div class="col-xs-1 text-center">-</div> 
          <div class="col-xs-5 text-left">Finland</div> 
         </div></a> 
        </li> 
        <li role="presentation"><a href="#"> 
         <div class="row"> 
          <div class="col-xs-5 text-right">Helsinki</div> 
          <div class="col-xs-1 text-center">-</div> 
          <div class="col-xs-5 text-left">Luxembourg</div> 
         </div></a> 
        </li> 
       </ul> 
      </div> 
     </div> 
     <div class="col-xs-6 output"> 

     </div> 
    </div> 
</div> 

С некоторыми JS, чтобы получить выбранное значение. Посмотрите здесь http://jsfiddle.net/84kx2uub/

Answer 2

Вы можете попробовать описание. Его можно было бы отобразить в горизонтальном направлении. Если ширина должна быть 100%, вы можете изучить другой вариант для разделения сторон, чем после предоставления «контента».

HTML

<dl> 
    <dt>USA</dt> 
    <dd>New York</dd> 
    <dt>India</dt> 
    <dd>Delhi</dd> 
    <dt>Canada</dt> 
    <dd>Ottawa</dd> 
    <dt>Finland</dt> 
    <dd>Helsinki</dd> 
    <dt>Luxembourg</dt> 
    <dd>Luxembourg</dd> 
</dl> 

CSS

dd:after { 
    clear: both; 
} 

dt, dd { 
    width: 49%; 
    float: left; 
} 

dt { 
    text-align: right; 
} 

dt:after { 
    content: " - "; 
} 

dd { 
    margin-left: 5px; 
}