Question

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

目前，我的代码如下：

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

CSS

 .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;}

目前设置此搜索栏的位置与其他链接相同。也就是左边。我不确定我怎么能把它放在右边。

Answer 1

如果您想要IE8 +支持而不使用display:table，则可以使用float属性！：）

working demo

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*/
}

导航栏左侧和右侧的元素没有浮动

1 个答案: