0

我有一个基本的 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" 添加到它，但它使它变得更加混乱。如果您能帮助我将此选择元素与文本字段垂直对齐，将不胜感激。谢谢

4

2 回答 2

1

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

.submit input {
    margin-left:110px;
}
于 2013-04-14T17:43:43.820 回答
0

只需添加display inline到您的段落中：

p {
    display: inline;
}

演示

于 2013-04-14T17:36:34.787 回答