text wrapping incorrectly for radio button

后端未结

关注

 4  1428

I have 2 html radio buttons (separated by tags) where the text is wrapping under the radio button instead of aligning with the left in

相关标签:

4条回答

再見小時候

2021-02-13 06:13

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.

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>

And then your CSS would look like this:

.radioLeft
{
   float: left;
}

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

0 讨论(0)

名媛妹妹

2021-02-13 06:15

Answer for 2015:
Since none of the other soultions worked for me, here's how I do it:

<!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>

See http://jsfiddle.net/8jzss08p/
Works in: Firefox 41, Chrome 45, Internet Explorer 11

0 讨论(0)

旧巷少年郎

2021-02-13 06:25
You can simply use CSS to force the text to wrap correctly. I'm assuming that you have a <span> tag around the text and so you can use the following to adjust its position:
```
span {
  display: block;
  margin-top: -16px;
  margin-left: 28px;
}
```
Hope that this helps! Tomer
0 讨论(0)
发布评论:

提交评论
- 加载中...
时光取名叫无心

2021-02-13 06:29
Sorry for answering this so late, I just came across this post, here's another solution :
```
p { margin-left: 20px; text-indent: -20px; }
```
0 讨论(0)
发布评论:

提交评论
- 加载中...