bugfix> html > 投稿

div内でULを正しく調整しようとしています。目的は、divのサイズを変更すると、その中のULが反対方向に移動し、視界から外れないようにするレスポンシブナビゲーションバーを使用することです。

ただし、右から左に領域を絞り込むと、次のようになります:

理想的には次のようになります。

私のCSS:

.navbar {
float: left;
width: 20%;
height: 2000px;
font: 600 1.25em/1.38 'Josefin Slab';
background-color: rgb(246, 84, 84);
}
.navbar .text {
float: left;
min-height: 39px;
font-size: 1em;
color: rgb(255, 255, 255);
}
.navbar .text-1{
margin-top: 50%;
}
.navbar .text {
clear: both;
width: 31.9157778085%;
flex:1;
margin-left:47%;
}
.navbar .navwrapper{
display:flex;
/*set direction every browser*/
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
flex-wrap:wrap;
}
.navbar .text:hover{
text-shadow: 2px 5px 5px rgba(0, 0, 0, .5);
}
@import url(http://fonts.googleapis.com/css?family=Josefin+Slab:600);

HTML:

<div className="navbar clearfix">
            <ul className="navwrapper">
                <Link to="/" id="Home" className="text text-1">Home</Link>
                <Link to="/Training" id="Training" className="text text-2">Training</Link>
                <Link to="/Contributions" id="Contribute" className="text text-3">Contribute</Link>
                <Link to="/Info" id="Info" className="text text-4">Info</Link>
                <Link to="/About" id="About" className="text text-5">About</Link>
            </ul>
        </div>

回答 1 件
  • display: flexbox を追加する  あなたの.navbar 親と justify-content: flex-end  ラッパーdivを右揃えする必要があります。

    HTML/CSSの例を次に示します。

    .navbar {
      display: flex;
      width: 50%;
      height: 2000px;
      font: 600 1.25em/1.38 'Josefin Slab';
      background-color: rgb(246, 84, 84);
      justify-content: flex-end;
    }
    .navbar .navwrapper {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      margin-right: 20px;
      margin-top: 50%;
      /* UL Reset */
      list-style: none;
    }
    .navbar .navwrapper a {
      text-decoration: none;
    }
    .navbar .text {
      font-size: 1em;
      color: white;
    }
    .navbar .text:hover{
      text-shadow: 2px 5px 5px rgba(0, 0, 0, .5);
    }
    
    
    <div class="navbar">
      <ul class="navwrapper">
        <li><a href="/" id="Home" class="text">Home</a></li>
        <li><a href="/Training" id="Training" class="text">Training</a></li>
        <li><a href="/Contributions" id="Contribute" class="text">Contribute</a></li>
        <li><a href="/Info" id="Info" class="text text-4">Info</a></li>
        <li><a href="/About" id="About" class="text text-5">About</a></li>
      </ul>
    </div>
    
    

あなたの答え