0

在创建具有两个动态大小列和它们之间的搜索框以及左侧和右侧的可单击选项卡的导航栏时，我遇到了有趣的问题。这是页面的代码：

<html>
<head>
<style>
.nav{
font-size: 14px;
width: 100%;
background-color: black;
color:white;
}

.nav .l-table {
display: table;
position: relative;
width: 100%;
}

.nav .l-table .l-cell {
display: table-cell;
position: relative;
text-align: center;
width: 95px;
}

.nav .l-table .l-cell.clickable {
background: gray;
}

.nav .l-table .l-cell.stretch{
min-width: 60px;
width: auto;
border-right: 1px solid;
}
</style>
</head>
<body>

<nav class="nav">
    <div class="l-table">
        <div class="l-cell clickable">
            <a href="#">Home</a>
        </div>

        <div class="stretch l-cell"></div>

        <div style="width:300px;" class="l-cell clickable">
                   <input type="text" value="Search"></input>
        </div>

        <div class="stretch l-cell"></div>

        <div class="l-cell clickable">
            <a href="#">Login</a>
        </div>
</div>
</nav>

</body>
</html>

请注意在调整窗口大小时两个黑色区域是如何缩小的。这是我想要的行为，以便导航栏根据屏幕大小调整其大小。

我遇到的问题是我不需要元素，但是当我从 cssborder-right中.nav .l-table .l-cell.stretch删除它们时，行为变得不同并且 width: auto 不起作用。

您可能知道可能是什么问题吗？移除边框会导致这种情况很奇怪，对我来说这似乎是一个错误。

您还有其他建议如何使用不同的 css 进行相同的导航吗？

谢谢你。

4

1 回答 1

2

您正在使用相当混乱的固定和可变宽度属性。如果您的问题允许，我可以建议仅使用相对宽度定义。

那是：

.nav .l-table .l-cell {
display: table-cell;
position: relative;
text-align: center;
width:5%;
min-width: 95px;
}

.nav .l-table .l-cell.clickable {
background: gray;
}

.nav .l-table .l-cell.clickable2 {
background: gray;
width:20%;
min-width:300px;
}

.nav .l-table .l-cell.stretch{
min-width: 60px;
width: 35%;
}

（clickable2 类用于中心搜索框。在此处更改类名并摆脱线条样式的宽度。）

于 2012-09-05T16:37:42.533 回答