Question

我有2个html单选按钮（由<br />标签分隔），其中文本在下单击单选按钮，而不是与左缩进对齐（由于它包含div的大小））。文本包装不是问题，问题是它在单选按钮本身下不正确地包装，而不是与它上面的行中的文本对齐。我假设有人在级联中的某个地方设置了输入标签的样式。我还没有详尽地搜索这个页面附带的所有样式，但是文本不应该像子弹列表那样自动正确包装吗？ enter image description here

如果没有，我将如何解决这个问题？我是否需要插入<br />标签，我希望线条断开以便它们正确对齐？

谢谢！

Answer 1

首先，通常不推荐使用<br />，尝试使用margin CSS属性在元素之间创建空间要好得多。

在这种情况下，最好使用CSS来做你想做的事情。这是因为默认情况下这些元素不会有这种行为。

在这种情况下，你会想要这样的东西：

<div style="width:300px">
    <input type="radio" class="radioLeft" />
    <div class="textBlock">
        Some text that is too long to fit inline and must be broken 
        up over multiple   lines.Some text that is too long to fit inline 
        and must be broken up over multiple lines.Some text that is too 
        long to fit inline and must be broken up over multiple lines.
    </div>
    <div style="clear:both;"></div> //this is important for repeated inputs
</div>

然后你的CSS看起来像这样：

.radioLeft
{
   float: left;
}

.textBlock
{
    float: left;
    width: 80%; //Adjust this value to fit
}

Answer 2

您可以简单地使用CSS强制文本正确包装。我假设您在文本周围有<span>标记，因此您可以使用以下内容来调整其位置：

span {
  display: block;
  margin-top: -16px;
  margin-left: 28px;
}

希望这有帮助！ Tomer的

Answer 3

2015年答案：
既然其他灵魂都没有对我有用，那我就是这样做的：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Radiobutton labels aligned</title>
<style type="text/css">
    div { display:table-row; }
    div span { display:table-cell; vertical-align:middle; } /* You can omit the entire span if you don't want the radiobutton vertically centered */
    div label { display:table-cell; }   
</style>
</head>
<body>
<form>
<div>
    <span><input type="radio" id="a"></span>
    <label for="a">First button's label<br>First button's label</label>
</div>
<div>
    <span><input type="radio" id="b"></span>
    <label for="b">Second button's label</label>
</div>
<input type="radio" id="c"><label for="c">For comparison: Standard-Label</label>
</form>
</body>
</html>

见http://jsfiddle.net/8jzss08p/
适用于：Firefox 41，Chrome 45，Internet Explorer 11

Answer 4

很抱歉这么晚回答这个问题，我刚看到这篇文章，这是另一个解决方案：

p { margin-left: 20px; text-indent: -20px; }

文本包装错误的单选按钮

4 个答案: