我是 CSS/Javascript 的新手，在处理一些看起来应该很简单的事情时遇到了麻烦。我有一系列单选按钮和相应的文本。我希望所有内容都显示为要点列表，但由于某种原因，弄乱其中一个的属性会弄乱(或取代？)另一个的对齐方式。
试图实现这一点(按钮旁边的文字):
如何在 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>
最佳答案
问题是 div默认情况下，元素有其 display CSS 属性设置为 block .
引用 W3Schools 的话说，“ block 元素是占据整个可用宽度的元素，并且在其前后有一个换行符。”你可能会注意到 <div>和 <p>像这样。
这里有几个选项。您可能想要使用一个元素，其 display属性已设置为 inline默认情况下，如 span或 label .内联元素只占用必要的宽度，不会强制换行。
您也可以设置您的 DIV s 至 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>
关于javascript - CSS -> 遇到非常基本的 CSS 布局问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21179209/