如何将2个容器对齐

自从将容器包装更改为自动调整大小到用户屏幕后，我遇到了问题。如何将2个容器对齐

我想要做的是创建一个表格，其中有一个主列和每行几个子列的数据。

当我尝试做任何float类型，当我清除它，它会清除我对左，右容器的工具栏。

我希望你能看到我想要做的样品代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>demo</title> 
<style type="text/css"> 
* {margin:0;padding:0;} 
    body { 
    background: #fff; 
    font-size:100%; 
} 
.wrapper { 
    min-width:500px; 
    margin:20px auto; 
    padding:10px; 
    overflow:hidden;/*contain inner floats*/ 
    background:#77F; 
} 

ul {background:#ccc;margin:0;padding:0;display:block;} 
li {list-style-type:none;display:inline;} 
.lheader {width:215px;text-align:left;background:#FFF;} 
</style> 
</head> 
<body> 

<div class="wrapper"> 
    <ul> 
     <li class="lheader">Left Side 1</li> 
     <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
    <li>item 4</li> 
</ul><ul> 
    <li class="lheader">Left Side 2</li> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
    <li>item 4</li> 
</ul><ul> 
    <li class="lheader">Left Side 3</li> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
    <li>item 4</li> 
</ul> 
</div> 

</body> 
</html>

来源

2011-08-24 Steve

尝试更改为：

ul { 
    background:#ccc; 
    margin:0; 
    padding:0; 
    display:inline-block; 
    *display:inline; 
    zoom:1; 
} 
li {list-style-type:none;}

还要注意最小宽度不被所有浏览器所支持

来源

2011-08-24 09:43:21

显示：内联块;也不支持所有的浏览器，你可以应用zoom：1;除了显示：inline-block;作为ie的修复。 – Blowsie

我已经更新以包含IE的修复程序。好点子@Blowsie –

*显示：inline;是为了IE的使用。 –

如何将2个容器对齐

回答

相关问题