文本换行不正确的单选按钮 [英] text wrapping incorrectly for radio button

问题描述

我有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;"/> //this is important
</div>

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

And then your CSS would look like this:

.radioLeft
{
   float: left;
}

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

这篇关于文本换行不正确的单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！