没有<table>就可以实现这种对齐吗？

我的目标是作为附图像中示出（在左侧的字段可具有任何宽度，但是在右侧的那些应该开始在相同的坐标X）的比对。

现在我用一个简单的表的代码来实现这一目标：

<table><tr> 
<td>Left1</td><td>Right 1</td></tr> 
<tr><td>Left 2</td><td>Right 2</td></tr></table>

不过，我听说使用表格一般是不好的。有没有一种方法可以使用CSS实现相同的设计？该网站正在为可能不支持花哨的CSS的移动设备而设计，因此代码必须尽可能简单。

编辑：因为我还是偶尔会从人这个问题谁（大概）刚刚与HTML起步，像我是当我做到了，请参阅接受的答案通过BT，因为这是一个通知这是实现此功能的最佳方式。这个问题被称为“可能的重复”（2016年5月31日），目前没有提供基于表格行/表格列的基于CSS的方法，并要求您进行猜测工作。

来源

2012-06-13 AM-

表有什么问题？这是他们的意思。其他任何可能比使用表格更复杂。 – Will

正如我所说，我读过的所有设计文章都不鼓励使用表格，因此也是一个问题。 –

我同意桌子不是去这里的最佳方式。是的，表格可以完成这项工作，但它们在语义上不正确，因为您没有创建表格。使用CSS实现同样的功能非常简单（请参阅我的回答） – xbonez

我发现了一个更简单的方法做这是偶然的。假设你有以下几点：

<div class='top'> 
    <div>Something else</div> 
    <div class='a'> 
    <div>Some text 1</div> 
    <div>Some text 2</div> 
    </div> 
    <div class='a'> 
    <div>Some text 3</div> 
    <div>Some text 4</div> 
    </div> 
</div>

您可以使用CSS表显示的造型像这样对齐Some text 1和Some text 2：

.a { 
    display: table-row; 
} 
.a div { 
    display: table-cell; 
}

最酷的事情是，只要“顶” DIV不是病急乱投医display: table，那么其他的东西，如“其他的东西”可以忽略对齐。如果'top'div的样式为display: table，那么“Some text 1”将与“Something else”对齐（即，即使它们具有不同的显示样式，它也将它的所有孩子视为表格行）。

这适用于Chrome，不知道它是否应该这样做，但我很高兴它的工作原理。

.a { 
 
     display: table-row; 
 
    } 
 
    .a div { 
 
     display: table-cell; 
 
    }

<div class='top'> 
 
     <div>Something else</div> 
 
     <div class='a'> 
 
     <div>Some text 1</div> 
 
     <div>Some text 2</div> 
 
     </div> 
 
     <div class='a'> 
 
     <div>Some text 3</div> 
 
     <div>Some text 4</div> 
 
     </div> 
 
    </div>

来源

2015-07-17 01:03:15

更多鲁棒性和可维护性的解决方案，因为它不需要猜测宽度。 – user1735003

这是我见过的第一个避免指定宽度和行为就像表一样的解决方案。完善！ – Greg

尽管可以对表格实现相同的操作，但为了布局的目的，将表格用于语义上会被视为不正确。特别是因为你可以使用一行或两行CSS来实现相同的功能。

给你的标签一个固定的宽度（比你最长的标签文本更大的东西）。

<style> 
label { 
    width: 100px; 
    display: inline-block; 
} 
</style> 

<label>Name</label> 
<input type="text" /> 
<br/> 
<label>Email Address</label> 
<input type="text" />

Example

来源

2012-06-13 19:02:38 xbonez

如果省略'display：inline-block'，会发生什么情况？（据说IE7不支持它） – Rodolfo

浏览器也会忽略宽度，因为宽度只能应用于块级元素。 – xbonez

是，这样的对准是可能的。使用CSS类，您可以用这种方式标记HTML，以便在不使用表格的情况下（或使标记看起来丑陋）而获得相同的表格外观。

使用这个CSS：

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

.inputBox { 
    width: 200px; 
}

这个HTML：

<span class="label">E-mail:</span><input type="email"></input><br> 
<span class="label">Password:</span><input type="text"></input>

，你会得到你想要的布局。

要使用IE7支持执行此操作，改变CSS以上这样：

.label { 
    display: block; 
    width: 100px; 
    float: left; 
    clear: left; 
}

然后，添加线低于该线路已经示出：使用IE7-

<div style="clear: left"></div>

实施例兼容设置：http://jsfiddle.net/bbXXp/

来源

2012-06-13 19:03:09 saluce

在这里，您可以使用它来获取所需的输出。

使用表IMO不是不好的做法，实际上它们应该用在需要表格数据的地方，或者数据的格式类似于表格。

然而，设计一个完整的页面，或者不使用表格格式显示的东西，使用表格是不鼓励的，事实上它是非常错误的。使用非表结构这里去一个样本：

HTML：

<form> 
    <label for="name">Email: </label><input id="name" type="email" placeholder="@" /> 
    <br/><br /> 
    <label>Password: </label><input type="password" id="password" placeholder="*"/> 
</form>

CSS：

label { 
    width: 80px; 
    display: block; 
    vertical-align: middle; 
    float:left; 
    clear:left; 
} 
input { 
    border-top-left-radius:5px; 
    border-bottom-right-radius: 10px; 
    background: #141414; 
    color: #fdd56c; 
    outline: none; 
}

这里是一个example

来源

2012-06-13 19:18:18

在上面的例子中，可以使用'display：inline-block'和css IE7 Hack作为'* display：inline'来避免使用float。更新了答案，以清除浮动 –

使用'br'这种方式是错误的想法http://stackoverflow.com/questions/3937515/when-to-use-br-line-breaks-vs-css-positioning – Zanshin13

真。我正在以艰难的方式学习它。我使用桌子进行对齐，现在，某些对齐方式在较小的屏幕（例如手机，平板电脑等）中变得非常棒。因此，我正在切换到div。优选使用<div style="display:inline-block">...</div>，如果屏幕较小，它将自动对齐。因此，我的建议是，表格只能用于真正的表格，而不能用于对齐主体中的控件。

来源

2016-10-21 06:53:05

没有<table>就可以实现这种对齐吗？

回答

相关问题