使用li而不是选择选项

时间:2017-02-08 03:48:41

标签: html css twitter-bootstrap-3

正如您在底部代码中看到的,我创建了li来制作列表,而不是在html标签中选择选项。但我在外表上得到了不可取的东西。

  1. 如何使li宽度与底部宽度相同。我在css中添加了宽度值。 100%的值使li比底部宽。 enter image description here
  2. 汤姆如何使插入符号和里面的数字向右浮动。我可以添加类拉线以使其处于正确的位置,但它使插入符号高于左侧位置的文本(我想让它们处于相同的中间垂直位置)
  3. 
    
    .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;
    	}
    
    <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-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>
    &#13;
    &#13;
    &#13;

3 个答案:

答案 0 :(得分:1)

您在position:absolute列表中使用.instead-option。因此,width:100%的计算与包含div的padding值无关。

您可以通过更改css以匹配col 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 */
}

答案 1 :(得分:1)

以下是你的答案。修复了两个点,请参阅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>

答案 2 :(得分:1)

  1. 由于您在position: absolute;元素上有.instead-option,因此可以使用position: relative;包含另一个元素。
  2. 您可以使用小型黑客通过top: 50%;规则水平和垂直放置插入符。
  3. .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>