コンテンツを一番下に合わせる（Navbar）

Question

リストの内容を一番下に合わせて整列させてみましょう。そうすれば、彼らはきちんとしたやり方で互いにやり合うでしょう。に。

.container-fluid { 
 
    padding-right: 0px !important; 
 
    padding-left: 0px !important; 
 
} 
 

 
ul.topnav { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 

 
ul.topnav li { 
 
    float: right; 
 
} 
 

 

 
ul.topnav li a { 
 
    padding-top: 39px; 
 
    display: inline-block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    transition: 0.3s; 
 
    font-size: 17px; 
 
} 
 

 

 
ul.topnav li a:hover { 
 
    background-color: #555; 
 
} 
 

 

 
ul.topnav li.icon { 
 
    display: none; 
 
} 
 

 

 

 
@media screen and (max-width:768px) { 
 
    ul.topnav li:not(:first-child) { 
 
     display: none; 
 
    } 
 
    ul.topnav li.icon { 
 
     float: right; 
 
     display: inline-block; 
 
    } 
 
} 
 

 

 
@media screen and (max-width:768px) { 
 
    ul.topnav.responsive { 
 
     position: relative; 
 
    } 
 
    ul.topnav.responsive li.icon { 
 
     position: absolute; 
 
     right: 0; 
 
     top: 0; 
 
    } 
 
    ul.topnav.responsive li { 
 
     float: none; 
 
     display: inline; 
 
    } 
 
    ul.topnav.responsive li a { 
 
     display: block; 
 
     text-align: left; 
 
    } 
 
} 
 

 
<!-- begin snippet: js hide: false console: true babel: false -->

<div class="container-fluid"> 
 
    <header> 
 
     <ul class="topnav" id="myTopnav"> 
 
      <li class="pull-left"><a><h1>Logo-Text</h1></a></li> 
 
      <li><a href="#home">Home</a></li> 
 
      <li><a href="#news">News</a></li> 
 
      <li><a href="find">Find us</a></li> 
 
      <li><a href="#about">About</a></li> 
 
      <li class="icon"> 
 
       <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> 
 
      </li> 
 
     </ul> 
 
    </header> 
 
</div>

Answer 1

.container-fluid { 
 
    padding-right: 0px !important; 
 
    padding-left: 0px !important; 
 
} 
 

 
ul.topnav { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    text-align: right; 
 
    padding-bottom: 5px; 
 
} 
 

 

 
ul.topnav li { 
 
    border-bottom: 1px solid #ffffff; 
 
    display: inline-block; 
 
    vertical-align: bottom; 
 
} 
 

 

 
ul.topnav li a { 
 
    padding-top: 39px; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    transition: 0.3s; 
 
    font-size: 17px; 
 
    line-height: 1; 
 
} 
 

 
ul.topnav li a h1{ 
 
    margin: 0; 
 
} 
 

 

 
ul.topnav li a:hover { 
 
    background-color: #555; 
 
} 
 

 

 
ul.topnav li.icon { 
 
    display: none; 
 
} 
 

 

 

 
@media screen and (max-width:768px) { 
 
    ul.topnav li:not(:first-child) { 
 
     display: none; 
 
    } 
 
    ul.topnav li.icon { 
 
     float: right; 
 
     display: inline-block; 
 
    } 
 
} 
 

 

 
@media screen and (max-width:768px) { 
 
    ul.topnav.responsive { 
 
     position: relative; 
 
    } 
 
    ul.topnav.responsive li.icon { 
 
     position: absolute; 
 
     right: 0; 
 
     top: 0; 
 
    } 
 
    ul.topnav.responsive li { 
 
     float: none; 
 
     display: inline; 
 
    } 
 
    ul.topnav.responsive li a { 
 
     display: block; 
 
     text-align: left; 
 
    } 
 
} 
 

 
<!-- begin snippet: js hide: false console: true babel: false -->

<div class="container-fluid"> 
 
    <header> 
 
     <ul class="topnav" id="myTopnav"> 
 
      
 
      <li><a href="#home">Home</a></li> 
 
      <li><a href="#news">News</a></li> 
 
      <li><a href="find">Find us</a></li> 
 
      <li><a href="#about">About</a></li> 
 
      <li class="icon"> 
 
       <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> 
 
      </li> 
 
      <li><a><h1>Logo-Text</h1></a></li> 
 
     </ul> 
 
    </header> 
 
</div>

私はちょうどliから浮い削除。 ulは、それはあなたのリスト項目下の整列を行います、その後

li{ display: inline-block; vertical-align: bottom; }

text-align: right;になります。この助けを願っています。