单选按钮的文本换行不正确

2022-01-21 00:00:00 input radio-button alignment css

我有 2 个 html 单选按钮(由 <br/> 标记分隔)，其中文本包裹在单选按钮 下方，而不是与左缩进对齐(由于它包含 div 的大小).文本换行不是问题，问题在于它在单选按钮本身下方错误地换行，而不是与其上方行中的文本对齐.我假设有人在级联中的某处设置了输入标签的样式.我没有对附加到此页面的所有样式进行详尽的搜索，但文本不应该像项目符号列表那样自动正确换行吗?

I have 2 html radio buttons (separated by <br /> tags) where the text is wrapping under the radio button instead of aligning with the left indent (due to the size it's containing div). The text wrapping is not the problem, the problem is that it is wrapping incorrectly under the radio button itself, instead of aligning with text in the line above it. I'm supposing someone styled the input tag somewhere in the cascade. I haven't done an exhaustive search of all the styles attached to this page, but shouldnt the text just automatically wrap correctly, like a bullet list?

如果没有，我将如何解决这个问题?我是否需要在我想要换行的地方插入一个 <br/> 标签，以便它们正确对齐?

And if not, how would i go about fixing this? Do i need to insert a <br /> tag where I want the lines to break so they will be properly aligned?

谢谢！

推荐答案

首先，<br/> 一般不推荐使用，多试一试好很多使用 margin CSS 属性在元素之间创建空间.

First of all, the use of a <br /> is generally not recommended, it's a lot better to try and use the margin CSS property to create space between elements.

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

It's also best in this situation to use CSS to do what you want to do. This is because by default those elements won't have this kind of behaviour.

在这种情况下，您需要如下所示:

In this case you would want something that looks like this:

<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 将如下所示:

And then your CSS would look like this:

.radioLeft
{
   float: left;
}

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

相关文章