css 单选按钮上的悬挂缩进[重复]

u1ehiz5o  于 2024-01-09  发布在  其他
关注(0)|答案(1)|浏览(112)

此问题在此处已有答案

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">&nbsp; Location 1</span>
  </label>
  <br>
  <label>
    <input type="radio" class="custom-radio" name="locations" value=1 />
    <span class="indented">&nbsp; Location xxx xxx xxx</span>
  </label>
</div>

的字符串

ztmd8pv5

ztmd8pv51#

首先,我会提醒你不要使用&nbsp;<br>作为间距,而是使用margins;你可以更细粒度地控制创建的空间大小,并且它使用样式化语言(CSS)进行样式化,使用结构化语言(HTML)进行结构化。
其次,这似乎是一个很好的使用flexbox的用例。将display: flex应用于label,并允许input既不增长也不收缩,这意味着它占用了给定的0.8em宽度,而span可以占用剩余的宽度。我添加了margin来弥补删除的&nbsp; s和<br> s。

.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;
  display: flex;
  margin-bottom: 1em;
}

.indented {
  margin-left: 0.2em;
}

.custom-radio {
  /* Hide the default radio button */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 0.8em;
  height: 0.8em;
  max-height: 0.8em;
  border-radius: 50%;
  border: 1px solid #FFA500;
  flex: 0 0 0.8em;
}

.custom-radio:checked {
  background-color: #FFA500;
  /* Change the background color when checked */
  border-color: #FFA500;
  /* Change the border color when checked */
}

个字符

相关问题