Question

我没有很多在前端工作的经验，所以我正在努力改善它。我读过的一件事是，最好使用CSS和布局而不是使用表格。这是我试图做的，但我无法弄清楚如何使事情正确排列。

例如我得到了

[名称] .. [文本框]
[主名称] .. [文本框]

我想要的是

[姓名] .............. [TextBox]
[主人姓名] .. [文本框]

以下是我创建的HTML。（抱歉尴尬，Stack Overflow＆＃39代码块对我来说效果不好。它也没有显示最终的结束div元素。）

 <div id="info1" style="background-color:#ffffff;float:left;width:100%;height:50px">
    <div id="Name" style="background-color: #ffffff; float: left;">
        <label for="txtName" style="display:inline;padding-right:1em;">Name:</label>
            <input type="text" id="txtName" style="width:150px;" />      
       <button id="btnSelect">...</button>
       </div>
</div>

    <div id="info2" style="background-color:#ffffff; float: left; width: 100%; height: 50px">
    <div id="masterName" style="background-color: #ffffff; float: left;">
        <label for="txtMasterName" style="display:inline;padding-right:1em;">Master Name:</label>
        <input type="text" id="txtMasterName" /> 
    </div>
</div>

Answer 1

使标签内联块并为其设置宽度。宽度将为您创建列效果：

label {
    display: inline-block;
    width: 200px;
}

这是展示一般想法的fiddle。

Answer 2

当人们说不使用表格进行布局时，他们指的是网站布局。

在诸如此类的情况下使用表格，或者比如结帐购物车

，仍然可以接受

查看表格中的this question和correct answer。

在单独的<div>元素</div>中排列标签

2 个答案: