Javascript HTML/CSS：排列多个标签和输入字段

我不擅长HTML和CSS，我正在努力理解如何在一个页面上排列多个元素

我已经能够将页面上的所有行对齐，但由于某种原因，当我希望标签显示在输入字段旁边时，标签会显示在输入字段上方，如下图所示

它看起来像什么：

我希望它看起来像什么：

我需要字段按照标签的结尾与输入的开始处对齐

请把我正在使用的代码的这一部分写下来

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>

收集主机信息：
收集主机信息
主机密码：
序列号：
资源名称：
资源状况：
主管理IP地址：
VMKernel：
资源组：
ESX类型：
${typeVar}
ESX版本：
${versionVar}
ESX构建：

您好，您不应该使用表，但一个快速而肮脏的修复方法是添加

td{
    white-space:nowrap;
}

到你的css。确保桌子足够大 使用div怎么样

HTML

---

尝试使用表单、标签和输入标记，而不是使用列和行。例如：

 <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中单击“选择元素”，您可以尝试动态更改样式并查看它是否正确放置文本

您可以使用

div

方法而不是

表

方法，如下所示：

.label{
显示：内联块；
文本对齐：右对齐；
宽度：45%；
}
.场{
显示：内联块；
宽度：50%；
}
.行{
边缘底部：10px；
}
.左{
宽度：49%；
显示：内联块；
}
.对{
宽度：49%；
显示：内联块；
}

这里有些田地
这里有些
这里有些田地
这里有些田地

这应该可以满足您的需要

表格{
宽度：100%；
表布局：固定；
}
td>输入{
浮动：对；
宽度：100px；
}
.左对齐{
文本对齐：左对齐；
}
.aligncenter{
文本对齐：居中；
}
.对{
文本对齐：右对齐；
}

收集主机信息：
收集主机信息
主机密码：
序列号：
资源名称：
资源状况：
主管理IP地址：
VMKernel：
资源组：
ESX类型：
${typeVar}
ESX版本：
${versionVar}
ESX构建：

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

取而代之的是divs

<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>

---

其背后的原因是CSS中左、中、右类的宽度。可以将标签标记用于输入，只需尝试从其中一个类中删除“临时宽度”。这里>>我不会在这里使用表-最好使用div并创建一个网格。这里的处理更加灵活您的表中有一些错误，我已经修复了这些错误并删除了不必要的CSS。见下文@Hip Hip Arrayalso floating td’s没有任何效果这可以工作，但是从左侧将项目排列起来，我需要将

标签：inputs

与

：

对齐，因为我说过确保您的表格足够大，以便它们彼此相邻，只需拖动winow larder或缩小或缩小输入，但我希望一行中最多有三个

标签：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> 

<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;
}