如何在HTML / CSS中格式化<select>标签和标签？

Question

这是我目前的布局 我试图弄清楚如何将所有信息“内联”如下 我之前从未使用过表单，因此我不知道如何格式化，我尝试使用谷歌搜索，但无法提供任何有用的信息，因为每个示例只有标签而不是像我的例子一样多个

Answer 1

＆＃13;

＆＃13;

sample

＆＃13;

table th {
  text-align: left;
}

＆＃13;

＆＃13;

＆＃13;

您可以在HTML中使用<table style="width:100%"> <tr> <th width="50%" align="left">Firstname</th> <td> <input type="text"> </td> </tr> <tr> <th>Lastname</th> <td> <input type="text"> </td> </tr> </table>格式 查看w3schools basic tutorial以获取更多详细信息。

<table>

Answer 2

首先在文本中添加标记。然后给出标签并选择固定宽度，您可能还需要使用display：inline-block：

进行设置

label{
width: 150px;
display:inline-block
}
select {
width:100px;
display:inline-block
}

以下是第一列字段的修改：jsfiddle

Answer 3

您可以不使用table这样使用。

li label {
    float: left;
    width: 100px;
    margin-right: 10px;
    font-size: 14px;
}

li {
    list-style: none;
    margin-bottom: 5px;
}

<ul>
<li><label for="name">First Name:</label></li>
<li><input type="text" name="name" placeholder="Name">
</ul>

Answer 4

或者您可以尝试将所有内容放在表格中，如下所示：

td {
  width: 200px;
}

<form>
  <table>
    <tr>
      <td>
        <lable>First Name</lable>
      </td>
      <td>
        <input>
      </td>
    </tr>
    <tr>
      <td>
        <lable>Last Name</lable>
      </td>
      <td>
        <input>
      </td>
    </tr>
  </table>
</form>

Answer 5

＆＃13;

＆＃13;

    <table>
    <tr>
    <td width="50%">First Name*</td>
    <td width="50%"><input style="width:100%;"/></td>
    </tr>
      <tr>
    <td >Last Name*</td>
    <td><input style="width:100%;"/></td>
    </tr>
      <tr>
    <td >Street Name*</td>
    <td ><input style="width:100%;"/></td>
    </tr>
      <tr>
    <td >City</td>
    <td ><input style="width:75%;"/></td>
    </tr>
    <tr>
    <td >State</td>
    <td ><input style="width:50%;"/></td>
    </tr>
      <tr>
    <td >Zip</td>
    <td ><input style="width:65%;"/></td>
    </tr>
      <tr>
    <td >Phone</td>
    <td ><input style="width:70%;"/></td>
    </tr>

    </table>
    
    
    <table>
    
        <tr>
    <td width="50%">Processor Speed</td>
    <td width="50%"><select style="width:100%"><option></option><option>2.4GHz</option></select></td>
    </tr>
      <tr>
    <td >Memory</td>
    <td><select style="width:100%"><option></option><option>1GB</option></select></td>
    </tr>
      <tr>
    <td >Monitor size</td>
    <td ><select style="width:100%"><option></option><option>15"</option></select></td>
    </tr>
      <tr>
    <td >Hard Drive</td>
    <td ><select style="width:100%"><option></option><option>240GB</option></select></td>
    </tr>
    <tr>
    <td >Dvd Burner</td>
    <td>
    <table style="width:100%;height:100%;">
    <tr>
    <td align="right" width="20%"><input type="checkbox" style="width:75%"/></td>
    <td align="left" width="30%">yes</td>
   <td align="right" width="20%"><input type="checkbox" style="width:75%"/></td>
    <td align="left" width="30%">NO</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td >LAN Card</td>
    <td>
    <table style="width:100%;height:100%;">
    <tr>
    <td align="right" width="20%"><input type="checkbox" style="width:75%"/></td>
    <td align="left" width="30%">yes</td>
   <td align="right" width="20%"><input type="checkbox" style="width:75%"/></td>
    <td align="left" width="30%">NO</td>
    </tr>
    </table>
    </td>
    </tr>    <tr>
    <td >Media Card Reader</td>
    <td>
    <table style="width:100%;height:100%;">
    <tr>
    <td align="right" width="20%"><input type="checkbox" style="width:75%"/></td>
    <td align="left" width="30%">yes</td>
   <td align="right" width="20%"><input type="checkbox" style="width:75%"/></td>
    <td align="left" width="30%">NO</td>
    </tr>
    </table>
    </td>
    </tr>
    
       
    
    
    </table>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

<table>
<tr>
<td width="50%">First Name*</td>
<td width="50%"><input style="width:100%;"/></td>
</tr>
  <tr>
<td width="50%">Last Name*</td>
<td width="50%"><input style="width:100%;"/></td>
</tr>
  <tr>
<td width="50%">Street Name*</td>
<td width="50%"><input style="width:100%;"/></td>
</tr>
  <tr>
<td width="50%">City</td>
<td width="50%"><input style="width:75%;"/></td>
</tr>
<tr>
<td width="50%">State</td>
<td width="50%"><input style="width:50%;"/></td>
</tr>
  <tr>
<td width="50%">Zip</td>
<td width="50%"><input style="width:65%;"/></td>
</tr>
  <tr>
<td width="50%">Phone</td>
<td width="50%"><input style="width:70%;"/></td>
</tr>

</table>

＆＃13;

＆＃13;

＆＃13;

Answer 6

你可以在表格中进行布局

<table  border="0" cellspacing="20">
 <tr >
  <td >Processor Speed</td>
  <td><select><option>2.4GHz</option></select></td>
 </tr>
 <tr >
  <td >Memory</td>
  <td><select><option>1 GB</option></select></td>
 </tr>
</table>

Answer 7

＆＃13;

＆＃13;

#contact-wrap{}

#contact-wrap { border: 1px solid black; font-family: arial, sans-serif; border-collapse: collapse; width: 100%; border-spacing: 0px;}
#contact-wrap, #contact-wrap th, #contact-wrap td { border-collapse: collapse;  vertical-align:top;}
#contact-wrap td, #contact-wrap th { text-align: left; padding: 0px; }
#contact-wrap input[type="text"] { width: 100%; height: 20px; line-height: 20px; }

＆＃13;

<table id="contact-wrap">
    <colgroup>
    	<col style="width:50%">
    	<col style="width:50%">
    </colgroup>
    <tr>
        <td>
        	<h4>Contact Information</h4>
        	<table id="contact-info">
                <colgroup>
                    <col style="width:40%">
                    <col style="width:60%">
                </colgroup>
                <tr>
                    <td>First Name: *</td>
                    <td><input type="text" placeholder="" /></td>
                </tr>
                <tr>
                    <td>Last Name: *</td>
                    <td><input type="text" placeholder="" /></td>
                </tr>
                <tr>
                    <td>Street: *</td>
                    <td><input type="text" placeholder="" /></td>
                </tr>
                <tr>
                    <td>City: *</td>
                    <td><input type="text" placeholder="" style="width:70%" /></td>
                </tr>
                <tr>
                    <td>State: *</td>
                    <td><input type="text" placeholder="" style="width:60%" /></td>
                </tr>
                <tr>
                    <td>Zip: *</td>
                    <td><input type="text" placeholder="" style="width:55%" /></td>
                </tr>
                <tr>
                    <td>Phone: *</td>
                    <td><input type="text" placeholder="" style="width:70%" /></td>
                </tr>
            </table>
        </td>
        <td>
        	<h4>Computer Cofiguration</h4>
        	<table id="config-info">
                <colgroup>
                	<col style="width:50%">
                	<col style="width:50%">
                </colgroup>
                <tr>
                    <td>Processor Speed: *</td>
                    <td>
                    	<select>
                        	<option>3.2 GH</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Memory: *</td>
                    <td>
                    	<select>
                        	<option>1 GB</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Monitor Size: *</td>
                    <td>
                    	<select>
                        	<option>16"</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Hard Drive: *</td>
                    <td>
                    	<select>
                        	<option>240 GB</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>DVD Burner: *</td>
                    <td>
                    	<input type="radio" name="yes">
                        <label for="yes">Yes</label>
                        <input type="radio" name="no">
                        <label for="yes">No</label>
                    </td>
                </tr>
                <tr>
                    <td>LAN Card: *</td>
                    <td>
                    	<input type="radio" name="yes">
                        <label for="yes">Yes</label>
                        <input type="radio" name="no">
                        <label for="yes">No</label>
                    </td>
                </tr>
                <tr>
                    <td>Media Card Reader: *</td>
                    <td>
                    	<input type="radio" name="yes">
                        <label for="yes">Yes</label>
                        <input type="radio" name="no">
                        <label for="yes">No</label>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

代码就在这里。

＆＃13;

＆＃13;

#contact-info { border: 1px solid black; font-family: arial, sans-serif; border-collapse: collapse; width: 100%; border-spacing: 0px; }

#contact-info, #contact-info th, #contact-info td { border-collapse: collapse;}
#contact-info td, #contact-info th { text-align: left; padding: 8px;}
#contact-info input{ width:70%; height:20px; line-height:20px;}

＆＃13;

<table id="contact-info">
<colgroup>
    <col style="width:40%">
    <col style="width:60%">
  </colgroup>
  <tr>
    <td>First Name: *</td>
    <td><input type="text" placeholder="" /></td>
  </tr>
  <tr>
    <td>Last Name: *</td>
    <td><input type="text" placeholder="" /></td>
  </tr>
  <tr>
    <td>Street: *</td>
    <td><input type="text" placeholder="" /></td>
  </tr>
  <tr>
    <td>City: *</td>
    <td><input type="text" placeholder="" style="width:30%" /></td>
  </tr>
  <tr>
    <td>State: *</td>
    <td><input type="text" placeholder="" style="width:20%" /></td>
  </tr>
  <tr>
    <td>Zip: *</td>
    <td><input type="text" placeholder="" style="width:25%" /></td>
  </tr>
  <tr>
    <td>Phone: *</td>
    <td><input type="text" placeholder="" style="width:30%" /></td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 8

使用flexbox的选项，但它可能与旧版本的IE（寻找新计算机的人）不太兼容

使用此选项，您需要使用div包装输入标题（名称，城市等）。

form {
  box-sizing : border-box;
  margin: 0px; padding: 0px;
}

ul {
  list-style-type: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10px;
  box-sizing : border-box; /* allows calculating size percentages without border and padding interfering */
  background-color: green;
}

li {
  display: flex;
  box-sizing : border-box;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 5px;
  background-color: red;
}

li div {
  display: flex;
  justify-content: flex-start;
  flex-grow: 1;
  width: 40%;
}
li div::after { /* a pseudo element for a spacer */ 
  content: "";
  display: flex;
  flex-grow: 1;
  background-color: blue;
}

input {
  display: flex;
  max-width: 50%;
  margin: 0px;
}

<强>拨弄

https://jsfiddle.net/Hastig/48nLnqop/3/

可能希望从示例中删除背景颜色，除非您有一个特别的早期圣诞节。