ナビゲーションバー内の要素を垂直に整列する方法は？

Question

さまざまなタブのリンクを含むナビゲーションバーを作成し、メニューをドロップダウンします。ナビゲーションバーの内側にあるすべての要素を垂直に配置するのに問題があります。 selectタグがいくつかの問題を引き起こしたようだ。ここに私の概要の一例である：

header.headerBox { 
 
\t width: 100%; 
 
\t height: 80px; 
 
\t border-top: 2px solid #000099; 
 
\t border-right: 2px solid #000099; 
 
\t border-left: 2px solid #000099; 
 
    border-bottom: 2px solid #000099; 
 
\t background-color: #87CEFF; 
 
} 
 
h1.mainTitle { 
 
\t color: #000099; 
 
\t text-align: center; 
 
\t margin: 0px; 
 
\t padding-top: 5px; 
 
\t padding-bottom: 5px; 
 
} 
 
nav.xNavigation { 
 
\t height: 100%; 
 
\t color: #000099; 
 
\t border-top: 2px solid #000099; 
 
\t margin: 0px; 
 
\t padding-top: 2px; 
 
\t padding-left: 5px; 
 
\t padding-right: 5px; 
 
\t padding-bottom: 2px; 
 
} 
 
nav.xNavigation a { 
 
\t color: #000099; 
 
\t text-decoration: none; 
 
\t cursor: pointer; 
 
\t font-weight: bold; 
 
} 
 
nav.xNavigation select { 
 
\t float: right; 
 
} 
 
nav.xNavigation a:hover { 
 
\t color: white; 
 
}

<header class="headerBox"> 
 
    <h1 class="mainTitle">Single Page Application</h1> 
 
    <nav class="xNavigation"> 
 
    <a href="#" id="tab1">Tab 1</a> | 
 
    <a href="#" id="tab2">Tab 2</a> | 
 
    <a href="#" id="tab3">Tab 3</a> | 
 
    <a href="#" id="tab4">Tab 4</a> | 
 
    <select name="menu" id="menu"> 
 
     <option value="mainBox" selected="selected">Home</option> 
 
     <option value="settingsBox">Settings</option> 
 
    </select> 
 
    </nav> 
 
</header>

あなたが要素上のコードで見ることができるように垂直に配向されていません。要素を整理する良い方法があるかどうかはわかりません。誰かが助けてくれたら教えてください。ありがとうございました。

Answer 1

フレックスボックスを使用している場合は、いくつかの調整を行い、必要なレイアウトを作成することができます。

あなたはFIXEの高さを設定するためです例

header.headerBox { 
 
    width: 100%; 
 
    height: 80px; 
 
    border-top: 2px solid #000099; 
 
    border-right: 2px solid #000099; 
 
    border-left: 2px solid #000099; 
 
    border-bottom: 2px solid #000099; 
 
    background-color: #87CEFF; 
 
    /* make header a flex container */ 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
h1.mainTitle { 
 
    color: #000099; 
 
    text-align: center; 
 
    margin: 0px; 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
} 
 

 
nav.xNavigation { 
 
    color: #000099; 
 
    border-top: 2px solid #000099; 
 
    margin: 0px; 
 
    padding-top: 2px; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
    padding-bottom: 2px; 
 
    /* make nav grow to fill available space */ 
 
    flex: 1; 
 
    /* make nav a flex container */ 
 
    display: flex; 
 
    /* vertically align contents */ 
 
    align-items: center; 
 
} 
 

 
nav.xNavigation a { 
 
    color: #000099; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
    font-weight: bold; 
 
} 
 

 
nav.xNavigation select { 
 
    /* push select to right side */ 
 
    margin-left: auto; 
 
} 
 

 
nav.xNavigation a:hover { 
 
    color: white; 
 
}

<header class="headerBox"> 
 
    <h1 class="mainTitle">Single Page Application</h1> 
 
    <nav class="xNavigation"> 
 
    <a href="#" id="tab1">Tab 1</a> | 
 
    <a href="#" id="tab2">Tab 2</a> | 
 
    <a href="#" id="tab3">Tab 3</a> | 
 
    <a href="#" id="tab4">Tab 4</a> | 
 
    <select name="menu" id="menu"> 
 
     <option value="mainBox" selected="selected">Home</option> 
 
     <option value="settingsBox">Settings</option> 
 
    </select> 
 
    </nav> 
 
</header>

Answer 2

;）

header.headerBox { 
 
    \t width: 100%; 
 
    \t border-top: 2px solid #000099; 
 
    \t border-right: 2px solid #000099; 
 
    \t border-left: 2px solid #000099; 
 
     border-bottom: 2px solid #000099; 
 
    \t background-color: #87CEFF; 
 
    } 
 
    h1.mainTitle { 
 
    \t color: #000099; 
 
    \t text-align: center; 
 
    \t margin: 0px; 
 
    \t padding-top: 5px; 
 
    \t padding-bottom: 5px; 
 
    } 
 
    nav.xNavigation { 
 
     display:flex; 
 
     flex-flow: row wrap; 
 
     align-items: center; 
 
    \t color: #000099; 
 
    \t border-top: 2px solid #000099; 
 
    \t margin: 0px; 
 
    \t padding-left: 5px; 
 
    \t padding-right: 5px; 
 
     padding-top: 10px; 
 
     padding-bottom: 10px; 
 
    } 
 
    nav.xNavigation a { 
 
    \t color: #000099; 
 
    \t text-decoration: none; 
 
    \t cursor: pointer; 
 
    \t font-weight: bold; 
 
    } 
 
    nav.xNavigation select { 
 
    \t display:flex; 
 
     flex-flow: row wrap; 
 
     justify-content: flex-end; 
 
    } 
 
    nav.xNavigation a:hover { 
 
    \t color: white; 
 
    } 
 
    .select-container { 
 
     width: 100%; 
 
     display: flex; 
 
     flex-flow: row wrap; 
 
     justify-content: flex-end; 
 
     padding-top: -20px; 
 
     margin-top: -20px; 
 
    }

<header class="headerBox"> 
 
     <h1 class="mainTitle">Single Page Application</h1> 
 
     <nav class="xNavigation"> 
 
     <a href="#" id="tab1">Tab 1</a> | 
 
     <a href="#" id="tab2">Tab 2</a> | 
 
     <a href="#" id="tab3">Tab 3</a> | 
 
     <a href="#" id="tab4">Tab 4</a> | 
 
     <div class='select-container'> 
 
      <select name="menu" id="menu"> 
 
      <option value="mainBox" selected="selected">Home</option> 
 
      <option value="settingsBox">Settings</option> 
 
     </select> 
 
     </div> 
 
     </nav> 
 
    </header>