Question

我是CSS / Javascript的新手，我遇到的问题似乎应该很简单。我有一系列单选按钮和相应的文本。我希望所有这些都作为一个项目符号列表出现，但出于某种原因，弄乱了一个混乱的属性（或取代？）另一个的对齐。

尝试实现此目的（按钮旁边的文字）：

enter image description here

如何在CSS中设置此样式？

<form id="form1">
   <input type="radio" name="choices" class="radioButtons" value="0" id="choice0">
   <div id="c0" class="choiceText">text here</div>
   <input type="radio" name="choices" class="radioButtons" value="1" id="choice1">
   <div id="c1" class="choiceText">text here</div>
   <input type="radio" name="choices" class="radioButtons" value="2" id="choice2">
   <div id="c2" class="choiceText">text here</div>
</form>

Answer 1

问题是，div元素默认情况下将display CSS属性设置为block。

引用W3Schools，'块元素是占用可用全宽度的元素，并且在它之前和之后都有换行符。您可能会注意到<div>和<p>的行为都是这样的。

这里有几个选项。您可能希望默认情况下使用display属性已设置为inline的元素，例如span或label。内联元素只占用所需的宽度，并且不会强制换行。

您也可以将DIV设置为display:inline而不是标准display:block。但是你可能想要在内容之后打破界限;在这种情况下，您可以使用:after选择器标记，添加换行符 - 如下所示：

<style>
    div.choicetext { display:inline; }
    div.choicetext:after { content:"\A"; white-space:pre; }
</style>

<form id="form1">
   <input type="radio" name="choices" class="radioButtons" value="0" id="choice0">
   <div id="c0" class="choiceText">text here</div>
   <input type="radio" name="choices" class="radioButtons" value="1" id="choice1">
   <div id="c1" class="choiceText">text here</div>
   <input type="radio" name="choices" class="radioButtons" value="2" id="choice2">
   <div id="c2" class="choiceText">text here</div>
</form>

Answer 2

非常简单，请使用<label>标记。不需要额外的样式或任何CSS技巧来使其工作。它只是有效。这就是<label>标签的创建内容。

这是MDN。这是Fiddle

<form id="form1">
   <input type="radio" name="choices" class="radioButtons" value="0" id="choice0">
   <label id="c0" class="choiceText">text here</label>
   <input type="radio" name="choices" class="radioButtons" value="1" id="choice1">
   <label id="c1" class="choiceText">text here</label>
   <input type="radio" name="choices" class="radioButtons" value="2" id="choice2">
   <label id="c2" class="choiceText">text here</label>
</form>

Answer 3

试试这个

    <form id="form1">
      
      <div id="c0" class="choiceText">
        <input type="radio" name="choices" class="radioButtons" value="0" id="choice0">
         text here</div>
      
      <div id="c1" class="choiceText">
        <input type="radio" name="choices" class="radioButtons" value="1" id="choice1">
         text here</div>
      
      <div id="c2" class="choiceText">
        <input type="radio" name="choices" class="radioButtons" value="2" id="choice2">
         text here</div>
      
    </form>

CSS - ＆gt;使用非常基本的CSS布局时遇到问题

3 个答案: