Question

几天前我才刚开始Web开发，因此在设计表单时遇到了问题。我正在使用html和css制作表单，但它并非根据我的需要而设计。我通过将标签和输入放到1格中来进行尝试，然后将标签浮动到左侧并输入到右侧，但是无法正常工作。

代码段

body,
html {
  margin: 0;
  padding: 0;
}

.form {
  width: 50%;
}

.group {
  width: 100%;
  margin: 20px;
}

.group label {
  float: left;
}

.inputrow input {
  float: right;
}

.inputrow input:not(.col-3) {
  width: 80%;
}

.col-3 {
  width: 20%;
}

.clear {
  clear: both;
}

<p>New Contact</p>
<hr style="height:1px;border:none;color:#333;background-color:#333;" />

<div class="form">
  <div class="group">
    <lable>Primary Contact</lable>
    <div class="inputrow">
      <select class="col-3">
        <option>Mr.</option>
        <option>Mrs.</option>
        <option>Ms.</option>
        <option>Miss.</option>
        <option>Dr.</option>
      </select>
      <input class="col-3" type="text" placeholder="First Name" name="FirstName" />
      <input class="col-3" type="text" placeholder="Last Name" name="LastName" />
    </div>
  </div>
  <div class="clear"></div>
  <div class="group">
    <label>Company Name</label>
    <div class="inputrow">
      <input class="col-1" type="text" placeholder="Company Name" name="CompanyName" />
    </div>
  </div>
  <div class="clear"></div>
  <div class="group">
    <label>Contact Email</label>
    <div class="inputrow">
      <input type="text" placeholder="Contact Email" name="Email" />
    </div>
  </div>
  <div class="clear"></div>
  <div class="group">
    <label>Contact Phone</label>
    <div class="inputrow">
      <input type="text" placeholder="Contact Phone" name="Phone" />
    </div>
  </div>
  <div class="clear"></div>
  <div class="group">
    <label>Website</label>
    <div class="inputrow">
      <input type="text" placeholder="Website" name="Website" />
    </div>
  </div>
  <div class="clear"></div>
  <div class="group">
    <label>Contact Type</label>
    <div class="inputrow">
      <input type="radio" name="contacttype" value="Customer">Customer
      <input type="radio" name="contacttype" value="Vendor">Vendor
    </div>
  </div>
</div>

Answer 1

您要实现的示例显然是所有对齐的。

您可以寻求这样的解决方案（更简单，更干净）：

body,
html {
  margin: 0;
  padding: 0;
}

.form {
  width: 100%;
}

.group {
  width: 100%;
  padding: 20px;
  clear: both;
}

label,
input,
select {
  float: left;
}

label {
  width: 150px;
}

.m-right {
  margin-right: 20px;
}

<p>New Contact</p>
<hr style="height:1px;border:none;color:#333;background-color:#333;" />

<div class="form">
  <div class="group">
    <label>Primary Contact</label>
    <select class="m-right">
      <option>Mr.</option>
      <option>Mrs.</option>
      <option>Ms.</option>
      <option>Miss.</option>
      <option>Dr.</option>
    </select>
    <input class="m-right" type="text" placeholder="First Name" name="FirstName" />
    <input type="text" placeholder="Last Name" name="LastName" />
  </div>
  <div class="group">
    <label>Company Name</label>
    <input type="text" placeholder="Company Name" name="CompanyName" />
  </div>
  <div class="group">
    <label>Contact Email</label>
    <input type="text" placeholder="Contact Email" name="Email" />
  </div>
  <div class="group">
    <label>Contact Phone</label>
    <input type="text" placeholder="Contact Phone" name="Phone" />
  </div>
  <div class="group">
    <label>Website</label>
    <input type="text" placeholder="Website" name="Website" />
  </div>
  <div class="group">
    <label>Contact Type</label>
    <label><input type="radio" name="contacttype" value="Customer">Customer</label>
    <label><input type="radio" name="contacttype" value="Vendor">Vendor</label>
  </div>
</div>

Answer 2

您需要选择选择框和收音机。您应该放一些html。

body,html{
margin:0;
padding:0;
}
.form{
width:50%;
}
.group{
width:100%;
margin:20px;
}
.group label{
float:left;
}
.inputrow input,.inputrow select,.inputrow select{
float:right;
}
.inputrow input:not(.col-3){
width:80%;
 }
.col-3{
width:20%;
 }
.clear{
clear:both;
}
.inputrow input[type=radio]{
 width:auto;
 float:left;
}
.inputrow div{
  width:40%;
  float:right;
}

<body>
<p>New Contact</p>
    <hr style="height:1px;border:none;color:#333;background-color:#333;" />

<div class="form">
<div class="group">
<lable>Primary Contact</lable>
<div class="inputrow">
    <select class="col-3">
        <option>Mr.</option>
        <option>Mrs.</option>
        <option>Ms.</option>
        <option>Miss.</option>
        <option>Dr.</option>
    </select>
    <input class="col-3" type="text" placeholder="First Name" name="FirstName"/>
    <input class="col-3" type="text" placeholder="Last Name" name="LastName"/>
</div>
</div>
<div class="clear"></div>
<div class="group">
<label>Company Name</label>
<div class="inputrow">
    <input class="col-1" type="text" placeholder="Company Name" name="CompanyName"/>     
</div>
</div>
<div class="clear"></div>
<div class="group">
<label>Contact Email</label>
<div class="inputrow">
    <input type="text" placeholder="Contact Email" name="Email"/>
</div>
</div>
<div class="clear"></div>
<div class="group">
<label>Contact Phone</label>
<div class="inputrow">
    <input type="text" placeholder="Contact Phone" name="Phone"/>
</div>
</div>
<div class="clear"></div>
<div class="group">
<label>Website</label>
<div class="inputrow">
    <input type="text" placeholder="Website" name="Website"/> 
</div>
</div>
<div class="clear"></div>
<div class="group">
<label>Contact Type</label>
<div class="inputrow">
    <div>
    <input type="radio" name="contacttype" value="Vendor">Vendor
    </div>
     <div>
    <input type="radio" name="contacttype" value="Customer">Customer
    </div>
</div>
</div>
</div>       
</body>

Answer 3

所需的布局可以通过使用网格系统来实现。可以找到示例here。在其中将每一行分成几部分，从而消除了浮动元素的需要。

关于实际样式，我建议您查看示例所使用的网站上的开发人员工具，并查看对每个元素应用的样式。可以通过按键盘上的 F12 来访问Chrome上的哪个版本。

如何正确设计html表单

3 个答案: