Navbar的元素定位在左側和右側，沒有浮動

我正在嘗試創建一個導航條，其中包含幾個鏈接對齊到左側，並且搜索表單包含一個圖像按鈕和一個文本字段，右側對齊。到目前爲止，我所看到的唯一解決方案就是使用一個浮點數，我想避開這個浮點數，因爲當我放大或調整瀏覽器寬度時，它完全打破了我的頁面。Navbar的元素定位在左側和右側，沒有浮動

目前，我的代碼如下：

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

這是當前設置，以便在搜索欄位於相同鏈接的其餘部分。就是在左邊。我不知道我怎麼能把它放在正確的位置。

來源

2014-01-09 user3176616

如果您想要IE8 +支持並且沒有float用法，您可以使用display:table屬性！ :)

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

來源

2014-01-09 08:47:32 NoobEditor

嗯，它沒有我的網頁上按預期工作，但我剛纔發現我忘了加上「類=導航」屬性的標籤導航欄。儘管如此，我認爲除此之外還有更多的事情要做，因爲鏈接的定位也會改變。目前，CSS使得頁面的左側和右側存在一定的間隙，並且當間距達到最小寬度時，間隙隨着較小瀏覽器寬度成比例地減小到0。添加你的改變，它立即失去了左側的差距。 – user3176616

@ user3176616：你可以做這個調整。但是，「table」和「table-cell」是要走的路。看到這個小提琴：*** http：//jsfiddle.net/2YkL2/***：我減小了最大和最小寬度，以便您可以在小提琴中輕鬆看到它。 – Abhitalks

@ user3176616：你能給我更新的小提琴嗎？ – NoobEditor

Navbar的元素定位在左側和右側，沒有浮動

回答

相關問題