Html 如何使标签显示在垂直列表中，但仍保留内联块的特性

我使用一些标签来表示一些单选按钮，因为我喜欢点击文本来影响单选按钮的功能。我希望它们显示在垂直列表中。问题是，当前它们显示为块，因此它们分布在整个页面上，用户可以单击答案右侧的空白处激活它

我知道我可以将标签包装在一个div中，并具有div显示块和包含的label显示内联块。问题是，我有100个标签需要调整，以适应这种变化，所以如果可能的话，我更喜欢直接使用CSS

我还可以使用float:left和clear：这两种方法来获得想要的效果，但问题是页面上的其他元素并没有通过这种方法显示出类似的效果

标签{
显示：块；
光标：指针；
}

回答
回答
回答
回答

使用属性

display:block

和

width:100%

属性使

标签

延伸到父标签的宽度。使用

文本对齐：居中属性”以水平对齐
标签内的文本

label{
  display:block; 
  width:100%;
  text-align: center;
}

使用属性
display:block
和
width:100%
properties使
标签
拉伸到父级的宽度。使用
文本对齐：居中属性”以水平对齐
标签内的文本

label{
  display:block; 
  width:100%;
  text-align: center;
}

尝试在每个元素后添加br并删除display:block

label::after {
    content: "<br>";
}

label:：after{
内容：“
”；
}
尝试在每个元素后添加br，并删除display:block

label::after {
    content: "<br>";
}

label:：after{
内容：“
”；
}
解决方案：

使用
：：after
伪元素填充行的其余部分，如下所示：

label::after {
  content: "";
  display: block;
}




代码片段：


标签{
光标：指针；
}
标签：：之后{
内容：“；
显示：块；
}

回答
回答
回答
回答
解决方案：

使用
：：after
伪元素填充行的其余部分，如下所示：

label::after {
  content: "";
  display: block;
}




代码片段：


标签{
光标：指针；
}
标签：：之后{
内容：“；
显示：块；
}

回答
回答
回答
回答
我能够获得理想的效果，添加右边距：50%，删除显示：块。但这似乎是一个不好的解决方法，我确信在较小的屏幕上会出现问题。有没有办法让右边空白总是填满多余的空间？通常你只需在每个标签后面加一个
。。。我知道你说过你有100个，但是用一个大多数文本编辑器都有的查找/替换工具应该很容易如果你不想让它们显示为块，为什么会出现这种情况？@Pamblam他想让显示块将它们放在单独的行上，但他不想看到它附带的100%宽度。谢谢你的澄清。。我的答案应该能达到这一点。我能够得到理想的效果，添加正确的边距：50%，删除显示：块。但这似乎是一个不好的解决方法，我确信在较小的屏幕上会出现问题。有没有办法让右边空白总是填满多余的空间？通常你只需在每个标签后面加一个
。。。我知道你说过你有100个，但是用一个大多数文本编辑器都有的查找/替换工具应该很容易如果你不想让它们显示为块，为什么会出现这种情况？@Pamblam他想让显示块将它们放在单独的行上，但他不想看到它附带的100%宽度。谢谢你的澄清。。我的答案应该能达到……谢谢，但这不是我想要达到的。我希望输入/标签向左对齐并堆叠在垂直列表中，但我希望宽度设置为inline-block。谢谢，但这不是我想要实现的。我希望输入/标签向左对齐并堆叠在垂直列表中，但我希望宽度设置为inline-block。是的，我考虑过这一点。最后剩下的标签上的间距可能不合适，但我总能找到解决办法。@Jleibham-我相信你可以在父元素上做一个负的底部边距来补偿<代码>页边距底部：-1em页边距底部：-1em