2

我很接近，但我无法让我的单选按钮在标签旁边排列。我已经将 css 更改了一百万次，但我似乎无法让我所有的文本框、单选按钮和评论框在彼此下方对齐。具体来说，第二个单选按钮没有与其余的东西对齐。

有任何想法吗？欣赏它！

这是实际代码：http: //jsfiddle.net/NpJ55/

我的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;
}
4

5 回答 5

2

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

#radio_form{
    float: left;
}

并放弃#radio_form ...规则！

于 2013-09-13T20:36:35.007 回答
1

删除规则：

#radio_form label + input {
    clear: both;
}

jsFiddle 示例

于 2013-09-13T20:34:16.137 回答
1

这是一个小提琴

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

input[type="radio"] {
  display: block;
  margin: 3px 7px 0 0;
}
于 2013-09-13T20:36:20.197 回答
1

inline-block您可以通过使用来避免与花车打架

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

在此处输入图像描述

.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;
}
于 2013-09-13T20:45:23.063 回答
0

或者相反，添加规则：

#radio_form {
    float: left;
}

小提琴

于 2013-09-13T20:36:03.623 回答