Question

假设我有以下HTML代码：

<form name="marketplace" method="post" action="marketplace">
    <table>
        <tr>
            <td class="input"><label>Key: <input type="checkbox" name="searchkeys" value="on" id="marketplace_key_checkbox" data-showerrors="false"></label></td>
            <td class="input"><select name="key" id="marketplace_key_select"></select></td>
        </tr>
        <tr>
            <td class="input"><label>Mod: <input type="checkbox" name="searchmods" value="on" id="marketplace_mod_checkbox" data-showerrors="false"></label></td>
            <td class="input"><select name="mod" id="marketplace_mod_select"></select></td>
        </tr>
    </table>
</form>

如何使用CSS3 而不是 table来获得相同的视觉表示（在http://jsfiddle.net/8H59u/上看到）？我有点迷失在哪里开始，任何提示将不胜感激。（不，你不需要我的代码）

另外作为额外内容：我是否更正我们不应该使用table进行布局定位？

Answer 1

http://jsfiddle.net/8H59u/2/

基本上，应用display:inline-block然后在它们上设置固定宽度。

Answer 2

如果您只需要支持IE8 +，您甚至可以使用display: table-cell和display: table。我认为不使用表格进行布局背后的一般思路是将样式与标记分开，这样您可以在不必更改HTML结构的情况下轻松更改外观。

Answer 3

另外作为额外的：我是否正确，我们不应该使用表格布局定位？

是即可。表格用于表格数据：从W3 table section：

表格不应仅仅用作布局文档内容的方法，因为这可能会在呈现给非可视媒体时出现问题。

避免布局中的表格是我们所说的Tableless。

解决问题的三个选项：

选项1：使用带显示表/ table-cell的div：

display: table;
display: table-cell;

- 并非在所有浏览器中都接受。

选项2：

display: inline-block;
width: 20%;
min-width: 120px;
max-width: 200px;

选项3：

float: left;
width: 20%;
min-width: 120px;
max-width: 200px;

Answer 4

另外作为额外的：我是否正确，我们不应该使用表格布局定位？

是.. !! 您不应使用表格进行布局

<强> HTML

 <form name="marketplace" method="post" action="marketplace">
   <div id="wrapper"> <div class="leftkey"><label>Key: <input type="checkbox" name="searchkeys" value="on" id="marketplace_key_checkbox" data-showerrors="false"/></label></div>
    <div class="rightkey"><select name="key" id="marketplace_key_select"><option>Test</option></select></div>
    <div class="leftkey"><label>Mod: <input type="checkbox" name="searchmods" value="on" id="marketplace_mod_checkbox" data-showerrors="false"/></label></div>
    <div class="rightkey"><select name="mod" id="marketplace_mod_select"><option>Test</option></select></div>
    </div>
</form>

<强> CSS

#wrapper
{
    width:200px;
}
.leftkey
{ width:100px;
    display:inline-block;
    float:left;
}
.rightkey
{
    display:inline-block;
    float:right;
    width:100px;
}

Fiddle Demo

Answer 5

这是你要找的吗？只需使用div / span标签而不是表格。这与原始代码完全相同，甚至不使用任何CSS。

http://jsfiddle.net/8H59u/13/

<form name="marketplace" method="post" action="marketplace">
    <div class="inputParent">
        <label>Key:
            <input type="checkbox" name="searchkeys" value="on" id="marketplace_key_checkbox" data-showerrors="false">
        </label> <span class="inputChild"><select name="key" id="marketplace_key_select"><option>Test</option></select></span>
    </div>
    <div class="inputParent">
        <label>Mod:
            <input type="checkbox" name="searchmods" value="on" id="marketplace_mod_checkbox" data-showerrors="false">
        </label> <span class="inputChild"><select name="mod" id="marketplace_mod_select"><option>Test</option></select></span>
    </div>

如何将HTML表转换为CSS定位？

5 个答案: