Question

自从更改我的容器包装器以自动调整大小到用户屏幕后，我遇到了麻烦。

我要做的是创建一个表单，其中包含一个主列和每行几个子列的数据。

当我尝试做任何类型的浮动时，当我清除它时，它会清除容器右侧和左侧的工具栏。

我希望您可以看到我正在尝试使用我制作的示例代码。

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

Answer 1

尝试改为：

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

另请注意，所有浏览器都不支持min-width

如何将2个容器对齐在一起

1 个答案: