此问题在此处已有答案:
Label text is wrapped but not indent second line(5个答案)
Li item on two lines. Second line has no margin(8个回答)
3天前关闭。
我有一个单选按钮列表,我希望任何 Package 的文本都有一个类似于
o Location 1
o Location 2 xxx
xxx xxx
字符串
我试过使用,但这对 Package 线没有影响。
text-indent: -0.8vw ;
padding-left: 0.8vw ;
型
下面是代码的简化版本(实际代码由数据驱动,并且是一个较长的列表)。
https://svelte.dev/repl/a373050bf11b43919b6e5c52795bea13?version=4.2.8的
.sideBar {
width: 100px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
font-size: 1em;
font-weight: 100;
}
label {
line-height: 1.5;
}
.indented {
/* text-indent: -0.8em ;
padding-left: 0.8em ; */
}
.custom-radio {
/* Hide the default radio button */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 0.8em;
height: 0.8em;
border-radius: 50%;
border: 1px solid #FFA500;
}
.custom-radio:checked {
background-color: #FFA500;
/* Change the background color when checked */
border-color: #FFA500;
/* Change the border color when checked */
}
<div class="sideBar">
<label>
<input type="radio" class="custom-radio" name="locations" value=1 />
<span class="indented"> Location 1</span>
</label>
<br>
<label>
<input type="radio" class="custom-radio" name="locations" value=1 />
<span class="indented"> Location xxx xxx xxx</span>
</label>
</div>
的字符串
1条答案
按热度按时间ztmd8pv51#
首先,我会提醒你不要使用
和<br>
作为间距,而是使用margins;你可以更细粒度地控制创建的空间大小,并且它使用样式化语言(CSS)进行样式化,使用结构化语言(HTML)进行结构化。其次,这似乎是一个很好的使用flexbox的用例。将
display: flex
应用于label
,并允许input
既不增长也不收缩,这意味着它占用了给定的0.8em
宽度,而span
可以占用剩余的宽度。我添加了margin来弥补删除的
s和<br>
s。个字符