gpt4 book ai didi

html - 使用 li 代替选择选项

转载 作者:太空宇宙 更新时间:2023-11-03 22:45:37 26 4
gpt4 key购买 nike

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

  1. 如何使 li 宽度与底部宽度相同。我在 css 中添加了宽度值。值 100% 使 li 比 bottom 宽。 enter image description here
  2. tom 如何使 li 位置内的插入符号和数字在右侧 float 。我可以添加类 pull-rigt 使其处于正确位置,但它使插入符号高于左侧位置的文本(我想让它们处于相同的中间垂直位置)

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

最佳答案

  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>

关于html - 使用 li 代替选择选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42104342/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com