HTML / CSS：排列多个Label和Input字段

Question

我不擅长HTML和CSS，我试图了解如何在页面上排列多个元素

我已经能够排列页面上的所有行但由于某种原因，标签出现在输入字段上方，当我希望它们出现在它们旁边时，如下图所示

它看起来像什么：

我希望它看起来像：

我需要通过标签末端符合输入开头的位置对齐字段

请使用我正在使用的代码的JSFiddle

CSS

.alignleft {
  float: left;
  width:33.33333%;
  text-align:left;
}
.aligncenter {
  float: left;
  width:33.33333%;
  text-align:center;
}
.alignright {
 float: left;
 width:33.33333%;
 text-align:right;
}​

HTML

 <table class="striped" width="90%">
    <tr>
        <td class="alignleft">Gather host info:
            <button id="gatherHostInfo" type="button">Gather Host Info</button>
        </td>
    </tr>
    <tr>
        <td class="alignleft">Host password:
            <input type="text" id="hostPassword" />
        </td>
        <td>&nbsp;</td>
        <td class="aligncenter">Serial Number:
            <input path="serialNumber" size="30" />
            <errors path="serialNumber" cssClass="error" />
        </td>
    </tr>
    <tr>
        <td class="alignleft">Resource Name:
            <input path="resourceName" id="hName" size="30" />
            <errors path="resourceName" cssClass="error" />
        </td>
        <td>&nbsp;</td>
        <td class="aligncenter">Resource Status:
            <select path="resourceStatus">
                <option value="Available" label="Available" />
                <option value="InActive" label="InActive" />
            </select>
        </td>
    </tr>
    <tbody id="ipTable">
        <tr>
            <td class="alignleft">Primary Mgmt IP address:
                <input path="IPaddress" id="ip" size="30" />
            </td>
            <td>&nbsp;</td>
            <td class="aligncenter">VMKernel:
                <input path="VMKernel" size="30" />
        </tr>
        <tr>
            <td class="alignleft">Resource Group:
                <select path="groupCol">
                    <options items="${groupCols}" />
                </select>
            </td>
        </tr>
    </tbody>
    <tr class="addResRow">
        <td class="alignleft">ESX Type:
            <select path="esxType" id="esxType">
                <option value="NONE" label="--- Select ---" />
                <c:forEach items="${esxType}" var="typeVar">
                    <option value="${typeVar}">${typeVar}</option>
                </c:forEach>
            </select>
        </td>
        <td>&nbsp;</td>
        <td class="aligncenter">ESX Version:
            <select path="esxVersion" id="esxVersion">
                <option value="NONE" label="--- Select ---" />
                <c:forEach items="${esxVersionsPassed}" var="versionVar">
                    <option value="${versionVar}">${versionVar}</option>
                </c:forEach>
                <%-- <options items="${esxVer}" />--%></select>
            <errors path="esxVersion" cssClass="error" />
        </td>
        <td>&nbsp;</td>
        <td class="alignright">ESX Build:
            <select path="esxBuild" id="esxBuild">
                <option value="NONE" label="--- Select ---" />
                <%-- <options items="${esxBuild}" />--%></select>
            <errors path="esxBuild" cssClass="error" />
        </td>
    </tr>
    </tbody>
</table>

Answer 1

用div怎么样？

HTML

<div class="box">
    <button id="gatherHostInfo" type="button">Gather Host<br />Info</button>
</div>
<div class="clear"></div>
<div class="box">
    <label>Host password:</label><input type="text" id="hostPassword" />
</div>
<div class="box">
    <label>Serial Number:</label><input path="serialNumber" size="30" />
</div>
<div class="clear"></div>
<div class="box">
    <label>Resource Name:</label><input path="resourceName" id="hName" size="30" />
</div>
<div class="box">
    <label>Resource Status:</label><select path="resourceStatus">
        <option value="Available" label="Available" />
        <option value="InActive" label="InActive" />
    </select>
</div>
<!-- CONTINUE WITH THESE BOXES -->

CSS

.box {
    width: 430px;
    margin: 5px 0;
    float:left;
}

.box label {
    width: 120px;
    padding-right: 10px;
    text-align: right;
    display:inline-block;
}

.clear {
    clear:both;
}

DEMO

Answer 2

你好，你不应该使用表，但快速和肮脏的修复将是添加

td{
    white-space:nowrap;
}

对你的CSS。 并确保表格足够大http://jsfiddle.net/qP46X/2277/

Answer 3

不要使用列和行，而是尝试使用form，label，input标签。 例如：

 <form action="demo_form.asp">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br>
  <input type="submit" value="Submit">
</form> 

另外两个建议： - 您可能想要查看一个框架，例如具有网格框架的jquery - 如果您右键单击该元素并在Google Chrome中单击“选择元素”，您可以尝试动态更改样式并查看它是否正确放置文本

Answer 4

您可以使用div方法而不是下面的table方法：

 .label { display:inline-block; text-align: right; width: 45%; } .field { display:inline-block; width: 50%; } .row { margin-bottom: 10px; } .left { width: 49%; display:inline-block; } .right { width: 49%; display:inline-block; } 

 <div class="form"> <div class="row"> <div class="left"> <div class="label">Some Field Here</div> <div class="field"><input type="text"/></div> </div> <div class="right"> <div class="label">Some Here</div> <div class="field"><input type="text"/></div> </div> </div> <div class="row"> <div class="left"> <div class="label">Some Field Here</div> <div class="field"><input type="text"/></div> </div> <div class="right"> <div class="label">Some Field Here</div> <div class="field"><select></select></div> </div> </div> </div> 

Answer 5

这应该做你需要的。

 table { width: 100%; table-layout: fixed; } td > input { float: right; width: 100px; } .alignleft { text-align: left; } .aligncenter { text-align: center; } .alignright { text-align: right; } 

 <table class="striped" width="90%"> <tbody> <tr> <td class="alignleft" colspan="2">Gather host info: <button id="gatherHostInfo" type="button">Gather Host Info </button> </td> </tr> <tr> <td class="alignleft">Host password: <input type="text" id="hostPassword" /> </td> <td class="aligncenter">Serial Number: <input path="serialNumber" /> <errors path="serialNumber" cssClass="error" /> </td> </tr> <tr> <td class="alignleft">Resource Name: <input path="resourceName" id="hName" /> <errors path="resourceName" cssClass="error" /> </td> <td class="aligncenter">Resource Status: <select path="resourceStatus"> <option value="Available" label="Available" /> <option value="InActive" label="InActive" /> </select> </td> </tr> <tr> <td class="alignleft">Primary Mgmt IP address: <input path="IPaddress" id="ip" /> </td> <td class="aligncenter">VMKernel: <input path="VMKernel" /> </tr> <tr> <td class="alignleft">Resource Group: <select path="groupCol"> <options items="${groupCols}" /> </select> </td> </tr> <tr> <td colspan="2"> <table> <tr class="addResRow"> <td class="alignleft">ESX Type: <select path="esxType" id="esxType"> <option value="NONE" label="--- Select ---" /> <c:forEach items="${esxType}" var="typeVar"> <option value="${typeVar}">${typeVar}</option> </c:forEach> </select> </td> <td class="aligncenter">ESX Version: <select path="esxVersion" id="esxVersion"> <option value="NONE" label="--- Select ---" /> <c:forEach items="${esxVersionsPassed}" var="versionVar"> <option value="${versionVar}">${versionVar}</option> </c:forEach> <%-- <options items="${esxVer}" />--%> </select> <errors path="esxVersion" cssClass="error" /> </td> <td class="alignright" colspan="2">ESX Build: <select path="esxBuild" id="esxBuild"> <option value="NONE" label="--- Select ---" /> <%-- <options items="${esxBuild}" />--%> </select> <errors path="esxBuild" cssClass="error" /> </td> </tr> </table> </td> </tr> </tbody> </table> 

Answer 6

通常你不会用表。 table用于显示数据，而不是用于标识您的布局。

http://jsfiddle.net/kqg98a0c/1/

而不是div。

<form>
<div class="col right">
    <label for=password>Host Password:</label>
    <label for=resource>Resource Name:</label>
</div>
<div class=col>
    <input id=password type=password placeholder="type it please!" />
    <input id=resource type=text placeholder="type it please!" />
</div>
<div class="col right">
    <label for=serial>Serial Number:</label>
</div>
<div class=col>
     <input id=serial type=text placeholder="type it please!" />
</div>

.col {
    float:left;
}
.col+.col {
    margin:0 5px;
}
label, input {display:block}
.right {
    text-align:right;
}