Question

我很接近，但我不能让我的单选按钮排在标签旁边。我已经改变了css一百万次，但我似乎无法让所有的文本框，单选按钮和通讯盒在彼此之间排列。具体来说，第二个单选按钮没有与剩下的东西排成一行。

有什么想法吗？欣赏它！

我的HTML和CSS：

<fieldset>
    <label for="name" class="formlabel">Name:</label>
    <input id="fName" name="name" type="text" class="forminput" />

    <label for="co" class="formlabel">Company:</label>
    <input id="fCo" name="co" type="text" class="forminput" />

    <label for="email" class="formlabel">Email:</label>
    <input id="fEmail" name="email" type="text" class="forminput" />

    <label for="phone" class="formlabel">Phone:</label>
    <input id="fPhone" name="phone" type="text" class="forminput" />

    <label for="contact" class="formlabel">Contact:</label>
    <div id="radio_form">
        <input id="radio_form_1" name="Sales" type="radio" value="Sales" />
        <label for="radio_form_1">Sales</label>
        <input id="radio_form_2" name="Technical" type="radio" value="Technical" />
        <label for="radio_form_2">Technical</label>
    </div>

    <label for="name" class="formlabel">Comments:</label>
    <textarea name="comments" rows="5" cols="50" class="forminput"></textarea>
    <input id="submit" name="submit" type="submit" class="forminput" value="Submit" />
</fieldset>

.formlabel {
    clear:left;
    display:block;
    float:left;
    margin:0 0 1em 0;
    padding:0 0.5em 0 0;
    text-align:right;
    width:8em;
}

.forminput {
    float:left;
    margin:0 0.5em 0.5em 0;
}

fieldset {
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
}

input, textarea {
    -moz-border-radius:5px;
    border-radius:5px;
    border:solid 1px #999;
    padding:2px;
}

#submit {
    background:grey;
    height:30px;
    width:100px;
    border:1px;
    color:white;
    font:family:Arial;
    font-weight:bold;
    font-size:15px;
    cursor:pointer;
}

#submit:hover {
    background:#4498e1;
}

#radio_form input {
    float: left;
}
#radio_form label {
    float: left;
}
#radio_form label + input {
    clear: both;
}

Answer 1

嗯 - 没有做太多改变...... http://jsfiddle.net/billymoon/NpJ55/3/

#radio_form{
    float: left;
}

放弃#radio_form ...规则！

Answer 2

删除规则：

#radio_form label + input {
    clear: both;
}

<强> jsFiddle example

Answer 3

这是Fiddle

#radio_form {
  float: left;
  margin-bottom: 13px;
}

input[type="radio"] {
  display: block;
  margin: 3px 7px 0 0;
}

Answer 4

您可以使用inline-block代替

来避免与花车战斗

http://jsfiddle.net/NpJ55/8/

enter image description here

.fieldwrap {
    margin: 15px 0;
}

.formlabel {
    display: inline-block;
    vertical-align: middle;
    text-align:right;
    width:8em;    
    font-size: 24px;
}

.radiolabel {
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    margin-right: 15px;
}

.radio {
    display: inline-block;
    vertical-align: middle;
}

.forminput {
    display: inline-block;
    vertical-align: middle;
}

Answer 5

或者相反，添加规则：

#radio_form {
    float: left;
}

Fiddle

CSS和单选按钮

5 个答案: