使用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. 既然你有position: absolute;.instead-option元素，你可以有另一种元素与position: relative;包装。
2. 通过使用top: 50%;规则，您可以使用小型hack来水平和垂直定位插入符号。

.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值无关。

你可以通过改变你的CSS来填充在山坳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。

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