代わりにliを使用してください

Question

下のコードで見ることができますが、リストを作成するためにliを作成する代わりに、htmlタグでオプションを選択します。私は外見上望ましくないものを得ます。

1. liの幅をボトム幅と同じようにする方法。私はCSSの幅の値を追加しました。値100％はliを底部よりも広くする。
2. どのようにして、右の位置に浮動小数点数のキャレットと数字を入れますか？あなたは、私が正しい位置にそれを作るために、クラスのプルRIGTを追加することができますが、それは左の位置にテキストよりもキャレットが高い作る（私は同じ中央の垂直位置にそれらを作るたい）

.instead-option { 
 
\t \t z-index:999; 
 
\t \t position: absolute; 
 
\t \t margin: 0; 
 
\t \t max-height:300px; 
 
\t \t background: #ffffff; 
 
\t \t border-radius:4px; 
 
\t \t border:1px solid #dddddd; 
 
\t \t width:100%; 
 
\t \t overflow:auto; 
 
\t } 
 

 
\t .instead-option > li { 
 
\t \t width:100%; 
 
\t \t background: #eee; 
 
\t \t line-height: 25px; 
 
\t \t font-size: 14px; 
 
\t \t padding: 0 10px; 
 
\t \t cursor: pointer; 
 
\t } 
 
\t .instead-option > li > a{ 
 
\t \t display: flex; 
 
\t \t width: 100%; 
 
\t } 
 

 
\t .instead-option > li:nth-child(odd) { 
 
\t \t background-color: #ffffff; 
 
\t } 
 

 
\t .instead-option > li:nth-child(even) { 
 
\t \t background-color: #e5e5e5; 
 
\t } 
 

 
\t .instead-option > li:hover { 
 
\t \t background: #aaa; 
 
\t } 
 

 
\t .instead-option > li > a{ 
 
\t \t color:#232323; 
 
\t \t text-decoration:none; 
 
\t }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
\t <div class="row"> 
 
\t \t <div class="col-sm-12"> 
 
\t \t \t <button type="button" class="form-control text-left nominal">Pilih nominal<span class="caret caret-right"></span></button> 
 
\t \t \t <ul class="instead-option list-unstyled"> 
 
\t \t \t \t <li><a href="#">English <span class="text-primary pull-right">10000</span></a></li> 
 
\t \t \t \t <li><a href="#">Deutsch <span class="text-primary pull-right">50000</span></a></li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </div> 
 
</div>

Answer 1

1. あなたは.instead-option要素にposition: absolute;を持っているので、あなたはposition: relative;で包む別の要素を持つことができます。
2. 小さいハックを使用して、top: 50%;ルールを使用して、キャレットを水平方向と垂直方向の両方に配置することができます。

.instead-option { 
 
    z-index: 999; 
 
    position: absolute; 
 
    margin: 0; 
 
    max-height: 300px; 
 
    background: #ffffff; 
 
    border-radius: 4px; 
 
    border: 1px solid #dddddd; 
 
    width: 100%; 
 
    overflow: auto; 
 
} 
 
.instead-option > li { 
 
    width: 100%; 
 
    background: #eee; 
 
    line-height: 25px; 
 
    font-size: 14px; 
 
    padding: 0 10px; 
 
    cursor: pointer; 
 
} 
 
.instead-option > li > a { 
 
    display: block; 
 
    width: 100%; 
 
} 
 
.instead-option > li:nth-child(odd) { 
 
    background-color: #ffffff; 
 
} 
 
.instead-option > li:nth-child(even) { 
 
    background-color: #e5e5e5; 
 
} 
 
.instead-option > li:hover { 
 
    background: #aaa; 
 
} 
 
.instead-option > li > a { 
 
    color: #232323; 
 
    text-decoration: none; 
 
} 
 
.dropdown-container { 
 
    position: relative; 
 
} 
 
.dropdown-container .caret { 
 
    position: absolute; 
 
    
 
    /* Have the same padding to right as in the button*/ 
 
    right: 12px; 
 
    
 
    /* Position the element from top by 50% of the parent element's height */ 
 
    top: 50%; 
 
    
 
    /* Moves the element from its current position by -50% on Y axis to position the element vertically middle*/ 
 
    transform: translateY(-50%); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-12"> 
 
     <div class="dropdown-container"> 
 
     <button type="button" class="form-control text-left nominal">Pilih nominal<span class="caret caret-right"></span> 
 
     </button> 
 
     <ul class="instead-option list-unstyled"> 
 
      <li><a href="#">English <span class="text-primary pull-right">10000</span></a> 
 
      </li> 
 
      <li><a href="#">Deutsch <span class="text-primary pull-right">50000</span></a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

.instead-optionのリストにposition:absoluteを使用しています。したがって、width:100%は、含まれているdivのpadding値とは無関係に計算されます。

あなたはコルdivの下に

.instead-option { 
    z-index:999; 
    position: absolute; 
    margin: 0; 
    max-height:300px; 
    background: #ffffff; 
    border-radius:4px; 
    border:1px solid #dddddd; 
    /* width:100%; */ /* REMOVE THIS LINE */ 
    overflow:auto; 
    left:15px; /* matches column left padding */ 
    right:15px; /* matches column right padding */ 
} 

Answer 3

にパディングを一致させるために、あなたのCSSを変更することでこの問題を解決することができ、あなたの答えです。両方の点が修正されました.CSSコードの最後に追加のCSSが追加されました。

.instead-option { 
 
    z-index: 999; 
 
    position: absolute; 
 
    margin: 0; 
 
    max-height: 300px; 
 
    background: #ffffff; 
 
    border-radius: 4px; 
 
    border: 1px solid #dddddd; 
 
    width: 100%; 
 
    overflow: auto; 
 
} 
 
.instead-option > li { 
 
    width: 100%; 
 
    background: #eee; 
 
    line-height: 25px; 
 
    font-size: 14px; 
 
    padding: 0 10px; 
 
    cursor: pointer; 
 
} 
 
.instead-option > li > a { 
 
    display: flex; 
 
    width: 100%; 
 
} 
 
.instead-option > li:nth-child(odd) { 
 
    background-color: #ffffff; 
 
} 
 
.instead-option > li:nth-child(even) { 
 
    background-color: #e5e5e5; 
 
} 
 
.instead-option > li:hover { 
 
    background: #aaa; 
 
} 
 
.instead-option > li > a { 
 
    color: #232323; 
 
    text-decoration: none; 
 
} 
 
/*Additional Css*/ 
 

 
.instead-option { 
 
    width: calc(100% - 30px) 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-12"> 
 
     <button type="button" class="form-control text-right nominal"> 
 
     <span class="pull-left">Pilih nominal</span><span class="caret caret-right"></span> 
 
     </button> 
 
     <ul class="instead-option list-unstyled"> 
 
     <li><a href="#">English <span class="text-primary pull-right">10000</span></a> 
 
     </li> 
 
     <li><a href="#">Deutsch <span class="text-primary pull-right">50000</span></a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>