Question

我尝试了另一种方法，将表单区域中的标签和文本字段与水平按钮对齐，但电子邮件标签和txtfield未完全对齐。

HTML

<div class="prefill2">
<h1>Need a Real Estate Expert?</h1>
<form class="action3" name="form1" method="POST" action="_sendmail.php" onSubmit="return CheckAll(this);">
    <div id="action3-fname">
        <label class="nick-3">Full Name:</label>
        <input type="text" class="name2" name="full_name" />
    </div>
    <div id="action3-email">
        <label class="nick-4">Email Address:</label>
        <input type="text" class="email2" name="email">
    </div>
    <div id="action3-button">
        <input type="submit" class="btn2" value="JOIN NOW" name="submit">
    </div>
</form> 
</div>

CSS

 #action3-fname {
display:inline-block;
}
 #action3-email {
display:inline-block;
}
 #action3-button {
display:inline-block;
}

.action3 .name2 {
border:thin #999 solid; 
border-radius:5px; 
float:left; 
height:22px; 
margin-bottom:10px; 
margin-left: 1px;
margin-top: 8px;
padding: 4px;
width: 210px;
}
.action3 .email2 {
  border: thin #999 solid;
  border-radius: 5px;
  height: 22px;
  margin-left: 22px;
  margin-top: -8px;
  padding: 4px;
  width: 210px;
    }
.action3 .nick-3 {
color:#000000;
}
.action3 .nick-4 {
margin-left:23px;
color:#000000;
}
.action3 .btn2 {
  background: none repeat scroll 0 0 #ff8400;
  border: medium none;
  border-radius: 5px;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 22px;
  font-weight: bold;
  height: 40px;
  margin-bottom: 15px;
  text-align: center;
  width: 140px;
  margin-left:10px;
}

Answer 1

我摆脱了花车和margin-top s。像这样：

.action3 .email2 {
  border: thin #999 solid;
  border-radius: 5px;
  height: 22px;
  margin-left: 22px;
  padding: 4px;
  width: 210px;
}

这是一个小提琴：http://jsfiddle.net/disinfor/9FG4f/8/

修改的更新了小提琴，正确关闭所有标签，并将前三行CSS组合成一个类。

.actionClass {
   display:inline-block;
}

<div class="prefill2">
    <h1>Need a Real Estate Expert?</h1>
    <form class="action3" name="form1" method="POST" action="_sendmail.php" onSubmit="return CheckAll(this);">
        <div id="action3-fname" class="actionClass">
            <label class="nick-3">Full Name:</label><br />
            <input type="text" class="name2" name="full_name" />
        </div>
        <div id="action3-email" class="actionClass">
            <label class="nick-4">Email Address:</label><br />
            <input type="text" class="email2" name="email" />
        </div>
        <div id="action3-button" class="actionClass">
            <input type="submit" class="btn2" value="JOIN NOW" name="submit" />
        </div>
    </form> 
</div>

Answer 2

摆脱<br>，摆脱float，它们应该很好地排列。

.action3 .name2 {
    border:thin #999 solid; 
    border-radius:5px; 
    /* float:left; <-- remove this */
    height:22px; 
    margin-bottom:10px; 
    margin-left: 1px;
    margin-top: 8px;
    padding: 4px;
    width: 210px;
}

<强> Here is your updated fiddle

Answer 3

我实际上让它们向左浮动并纠正了几个边缘。按钮和所有东西排成一列。 Here's my updated fiddle

#action3-fname {
float:left;
}
#action3-email {
float:left;
}

内联块不起作用

3 个答案: