Question

我在创建导航栏时遇到了一个有趣的问题，导航栏有两个动态大小的列和它们之间的搜索框，以及左侧和右侧的可点击标签。以下是该页面的代码：

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

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

我遇到的问题是我在border-right元素中不需要.nav .l-table .l-cell.stretch，但是当我从css中删除它们时，行为会变得不同而宽度：auto不起作用。

你可能有一个线索可能是什么问题？奇怪的是，移除边界会导致这种情况，这对我来说似乎是个错误。

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

谢谢。

Answer 1

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

那是：

.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类用于中心搜索框。更改那里的类名并删除线条样式的宽度。）

Div动态宽度分为两列和边框

1 个答案: