Html 导航栏，元素位于左侧和右侧，无浮动

我正在尝试创建一个导航栏，其中包含与左侧对齐的多个链接，以及一个由图像按钮和与右侧对齐的文本字段组成的搜索表单。到目前为止，我看到的唯一解决方案是使用浮动，我想避开它，因为当我缩放或调整浏览器宽度时，它会完全打断我的页面

目前，我的代码如下：

<div class="navbar">
    <div class="bar">
        <span style="border-right:1px solid #555;padding-top:11px;padding-bottom:11px;"></span><!--
        --><a class="nav" href=...</a><!--
        --><a class="nav" href=...</a><!--
        --><a class="nav" href=...</a><!--
        --><span style="border-left:1px solid #000;padding-top:11px;padding-bottom:11px;"></span><!--
        --><div class="search">
            <form style="width:100%;text-align:left;">
                <input type="image" src="Images/search.png" alt="Search"/>
                <input type="text" placeholder="Search" style="width:50%;border:none;"/>
            </form>
        </div>
    </div>
</div>

---

这是当前设置的，以便搜索栏的位置与其余链接的位置相同。就是左边。我不确定如何将其放在右边。

如果您想要IE8+支持且无

浮点值

用法，可以使用

display:table

属性！！：）

---

嗯，它在我的页面上并没有像预期的那样工作，但我现在才意识到我忘了在导航栏中的标记中添加“class=nav”属性。不过，我认为肯定还有更多，因为链接的定位也发生了变化。目前，CSS使页面的左右两侧都有一定的间隙，当达到最小宽度时，间隙会随着浏览器宽度的减小成比例地减小到0。添加您的更改后，它会立即丢失左侧的间隙。@user3176616:您可以进行调整。但是是的，

table

和

table cell

是一个不错的选择。看这把小提琴：我把最大和最小宽度缩小了一点，这样你就可以很容易地在小提琴中看到它。

 .navbar{background:#000 url('../Images/navBG.png') repeat-x;font-weight:bold;border-top:1px solid #BBB;border-bottom:1px solid #BBB;}
    .bar{margin:0 auto;max-width:1280px;min-width:800px;width:84%;padding:10px;}
    .bar div{display:inline-block;}
    .bar a{padding:11px;}
    .nav{border-left:1px solid #000;border-right:1px solid #555;}
    .search{text-align:right;background:#FFF;overflow:hidden;border-radius:5px;}

body, html {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.navbar {
    background:#000 url('../Images/navBG.png') repeat-x;
    font-weight:bold;
    border-top:1px solid #BBB;
    border-bottom:1px solid #BBB;
    display:table;   /*added*/
    width:100%;   /*added*/
}
.bar {
    display:table-cell;/*added*/
    width:50%;   /*added*/
}
.bar a {
    padding:11px;
}
.nav {
    border-left:1px solid #000;
    border-right:1px solid #555;
}
.search {
    text-align:right;
    background:#FFF;
    overflow:hidden;
    border-radius:5px;
    display:table-cell;    /*added*/
    width:50%;    /*added*/
}