如何將我的導航欄置於兩個不平坦元素之間？

我一直在亂搞我的代碼大約兩天了，我所做的一切都不起作用。我希望導航欄位於兩個元素中間（<img>, <form>）。現在大致居中，但當您重新調整窗口大小時，它會在1600px左右混亂。它只需要工作到1500px，因爲在那之後，我要去一個不同的導航欄的位置和風格。如何將我的導航欄置於兩個不平坦元素之間？

Codepen：http://codepen.io/anon/pen/KpECd

HTML：

<header> 
     <img src="../Images/Logo.svg" class="logo"> 
     <nav> 
      <a href="#" class="one">SHARING</a> 
      <a href="#" class="two">HOSTING</a> 
      <a href="#" class="three">PRICING</a> 
      <a href="#" class="four">ACCOUNT</a> 
     </nav> 
     <form method="post" action="index.php"> 
      <button value="SIGNUP" name="signup">SIGNUP</button>    
      <button value="LOGIN" name="login">LOGIN</button> 
     </form>  
    </header>

CSS：

@charset "utf-8"; 

header { 
    background-color:#464646; 
    height:100px; 
    width:100%; 
} 

header .logo { 
    max-height:44px; 
    max-width:535px; 
    margin:28px 28px 28px 28px; 
} 

header form { 
    display:inline; 
    float:right; 
    margin:28px 28px 28px 28px; 
} 

header form button { 
    height:44px; 
    width:125px; 
    border:2px solid white; 
    border-radius:10px; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    background-color:transparent; 
    font-family:"Lato Black"; 
    color:white; 
    font-size:22px; 
} 

header form button:hover { 
    background-color:rgba(255, 255, 255, .2); 
    cursor:pointer; 
} 

header form button:active { 
    background-color:rgba(255, 255, 255, .8); 
} 

nav { 
    width:47.5%; 
    display:inline;; 
    position:absolute; 
    text-align:center; 
} 

nav a { 
    display:inline-block; 
    height:100px; 
    width:20%; 
    color:white; 
    font-family:"Lato Black"; 
    text-decoration:none; 
    font-size:16px; 
    line-height:100px; 
} 

nav a:hover { 
    background-color:#00a651; 
    cursor:pointer; 
}

來源

2014-10-20 Joe Scotto

你想要的菜單和按鈕來動態地重新定位它們自己，或者當你調整窗口的大小時，你會寧願一切都保持放置，當窗口太小時，按鈕/菜單會被切斷？如果您爲標題添加最小寬度，則可以控制窗口切換到滾動條的位置。 – sabrams 2014-10-20 17:00:14

我有所有的媒體查詢，它是動態的，但它並沒有重新調整我想要的方式。我希望導航按鈕是「流暢的」，並根據頁面大小的百分比重新調整大小。 – 2014-10-20 17:02:49

如果你有3個元素，你想一個在左，一個在右，最後一箇中心之間的其他人，你可以使用這樣的表：

<table cellpadding="0" cellspacing="0" border="0" style="width:100%;"> 
<tr> 
    <td align="left" valign="middle"> 
     <img src="myimage.jpg" /> 
    </td> 
    <td align="center" valign="middle" style="width:100%;"> 
    <!-- width 100% will take all the spaces between the other cells --> 
    <a href="#" class="one">one</a> 
    <a href="#" class="two">two</a> 
    <a href="#" class="three">three</a> 
    <a href="#" class="four">four</a> 
    </td> 
    <td align="right" valign="middle"> 
    <form method="post" action="index.php" style="width:260px;"> 
     <button value="SIGNUP" name="signup" style="width:120px;">SIGNUP</button> 
     <button value="LOGIN" name="login" style="width:120px;">LOGIN</button> 
    </form> 
    </td> 
</tr> 
</table>

DEMO

如果你不喜歡像很多人表，你可以使用DIV用浮漂和jQuery：

winResize = function(){ 

    var HeaderWidth = $("#header").outerWidth(); 
    var div1Width = $("#div1").outerWidth(); 
    var div3Width = $("#div3").outerWidth(); 

    var div2Width = HeaderWidth - div1Width - div3Width; 
    $("#div2").css("width", div2Width+"px"); 
} 

winResize(); 

$(window).resize(function(){ 

    winResize(); 
});

JQUERY DEMO

來源

2014-10-20 17:12:34 pmrotule

據我所知，表格很糟糕，不能用於佈局。有沒有桌子的另一種方式？ – 2014-10-20 17:21:50

歡迎來到2002 – Turnip 2014-10-20 17:40:56

@ 3rror404我知道這不是正確的做法，但幾乎在每個瀏覽器上都支持它，而且這是我找到如何做到的唯一方法。我有什麼理由使用替代方法？ – 2014-10-20 17:50:32

如何將我的導航欄置於兩個不平坦元素之間？

回答

相關問題