0

2 つの動的サイズの列とそれらの間に検索ボックスがあり、左右にクリック可能なタブがあるナビゲーション バーを作成しているときに、興味深い問題に遭遇しました。ページのコードは次のとおりです。

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

ウィンドウのサイズ変更中に 2 つの黒い領域が縮小することに注意してください。これは私が望む動作であり、ナビゲーションバーは画面のサイズに応じてサイズを調整します。

border-right私が抱えている問題は、要素を必要としないことですが.nav .l-table .l-cell.stretch、それらをcssから削除すると、動作が異なり、 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 に答える