下面的单选按钮的文字prevent包装 [英] Prevent wrapping of text below radio buttons

问题描述

我能描述我想最好的办法是这样的画面：

The best way I could describe what I want is with this picture:

我如何使它所以在文本的最上面的文本对齐，而不是单选按钮？

How do I make it so the text aligns with the top text, and not the radio button?

相关CSS如下：

.basic-grey {
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    background: #FFF;
    word-wrap: break-word; 
    padding: 20px 30px 20px 30px;
    font: 12px "Myriad Pro", sans-serif;
    color: #888;
    text-shadow: 1px 1px 1px #FFF;
    border:1px solid #DADADA;
}

}
.basic-grey h1>span {
    display: block;
    font-size: 11px;
}
.basic-grey label {
    display: block;
    margin: 0px 0px 5px;
}
.basic-grey label>span {
    float: left;
    width: 80px;
    text-align: right;
    padding-right: 10px;
    margin-top: 10px;
    color: #888;
}
.basic-grey select {
    background: #FFF url('down-arrow.png') no-repeat right;
    background: #FFF url('down-arrow.png') no-repeat right);
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    width: 72%;
    height: 30px;
}
.basic-grey textarea{
    height:100px;
}
.basic-grey p {
    display: inline ;
}
;}

       <form name="frm1" action="index4.php" method="POST" class="basic-grey">
    <h3>2.  I have taught the course, several times face to face, that I wish to transform into a blended format.  </h3>
    <input type="radio" name="q2" value="1" /> <p>This statement accurately reflects my experience.</p><br>
    <input type="radio" name="q2" value="2" /> <p>This statement partially reflects my experience (I have taught the course only a few times or once before).</p><br>
    <input type="radio" name="q2" value="3" /> <p>This statement does not reflect my experience (this a new course that I will teach for the first time in a blended format).</p><br>
    <br>
    <input type="submit" name="button" class="button" value="Submit" /> 

</form>

当我尝试飘起了单选按钮，所有的文字变得不正常了。

When I try to float the radio button, all the text becomes out of whack.

推荐答案

这是pretty的简单，只要把你的标签元素显示：块; 和使用利润率左为标签和浮动的单选按钮，左侧

It's pretty simple, just turn your label element to display: block; and use margin-left for the label and float your radio button to the left

<大骨节病> 演示

<大骨节病> 演示2 的（没有什么特别的，只是使用多个无线的演示）的

input[type=radio] {
    float: left;
}

label {
    margin-left: 30px;
    display: block;
}

只是需要注意的是说，如果你的存储与标签电台的里元素，像

<ul class="radiolist">
    <li>
        <input type="radio"><label>Your text goes here</label>
    </li>
</ul>

所以一定要确保你自己清楚他们可以利用像

So make sure you self clear them by using something like

.radiolist li:after {
    content: "";
    clear: both;
    display: table;
}

这将确保你是自清除所有的里元素，以及有关：在伪，它能很好的支持IE8所以没什么可担心的。

That will ensure that you are self clearing all the li elements, and about the :after psuedo, it is well supported in IE8 so nothing to worry about.

这篇关于下面的单选按钮的文字prevent包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！