gpt4 book ai didi

html - 编号有序列表应与选择元素位于同一垂直线上

转载 作者:行者123 更新时间:2023-11-28 01:45:29 25 4
gpt4 key购买 nike

我希望所选列表显示在与选择元素相同的高度。

enter image description here

如果我删除 padding-left,则选择太靠左了。

enter image description here

使用 padding-left 它太靠右了。

enter image description here

我也不想给出 padding-left 的近似像素数来解决问题。有没有更优雅的解决方案?

.flex {
display:flex;
flex-wrap: wrap;
align-items:center;
}

.flex > div {
flex-basis:100%;
margin-bottom: 30px;
background-color: #555;
height: 50px;
}

.flex > div span {
display: inline-block;
width: 50%;
}

.flex > div > ol {
display: inline-block;
}
<div class="flex">
<div>
<span>Lorem Ipsum</span>
<select name="" id="">
<option value="loremIpsum">Lorem Ipsum</option>
</select>
</div>

<div>
<span>Lorem</span>
<ol>
<li>
<select name="" id="">
<option value="lorem">Lorem</option>
</select>
</li>
</ol>
</div>
</div>

最佳答案

我会这样做检查代码,你会看到我将它们包装在父 div 中并给它显示 flex 并为 first 定义宽度> 元素,然后 second 元素将自动在同一行开始,并确保 ol

的样式
padding: 0;
list-style-position: inside;

https://jsfiddle.net/62q6zrnr/2

   .one,
.two {
background-color: #ddd;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
margin-bottom: 30px;
}

.base {
width: 50%;
flex-basis: 50%;
}


ol {
padding: 0;
list-style-position: inside;
}
  <div class="one">
<p class="base">lorem</p>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="two">
<p class="base">lorem 2</p>
<ol>
<li>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</li>
<li>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</li>
<li>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</li>
<li>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</li>
<li>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</li>
</ol>
</div>

关于html - 编号有序列表应与选择元素位于同一垂直线上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50208758/

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