Question

我有一个基本的CSS问题。我正在尝试将css添加到我的表单中，代码如下：

<div id="content">
<form id="form1" method="post" action="">
  <p>
    <label for="name" class="title">Your name:</label>
    <input name="name" type="text" class="widebox" id="name">
  </p>
  <p>
    Colour: <select name="colour_pref" size "1">
    <option value="1">Pink</option>
    <option value="2">Blue</option>
    <option value="3">White</option></select>
  </p>
  <p class="submit">
    <input type="submit" name="add" value="add_colour" id="add">
  </p>
</form>
</div>

这是css：

#content p {
    border-bottom: 1px solid #efefef;
    margin: 10px;
    padding-bottom: 10px;
    width: 260px;}
.title {
    float: left;
    width: 100px;
    text-align: right;
    padding-right: 10px;}
.submit {
    text-align: right;}

问题是select元素没有与name字段对齐，我试图将class =“title”添加到它，但它使它更加混乱。如果你能帮助我将这个选择元素与文本字段对齐，真的很感激。感谢

Answer 1

像这样的DEMO http://jsfiddle.net/kevinPHPkevin/XzHG2/1/

.submit input {
    margin-left:110px;
}

Answer 2

只需在段落中添加display inline：

p {
    display: inline;
}

Demo

如何垂直对齐此选择元素

2 个答案: