有没有办法将此.logout移到右侧?

时间:2018-07-18 11:19:28

标签: html css flexbox

    body {
      background-color:olive;
      margin:0;
    }

    nav {
      background-color:aqua;
    }
    
    #container{
      max-height:1800px;
      display:flex;
      flex-direction:row;
      
    }

     a {
      
      background-color:chocolate;
      padding:7px;
      border-radius:10px; 
      text-decoration:none;
    }

    #container > a:hover{
      opacity:0.5;
    }

    #item-2, #item-3, #item-1, #item-0 {
     align-self:flex-start;
     margin-top:5px;
    }

    #logout {
     align-self:flex-end;
    }

    }
    /* nav is finally done after 1.5 hours lol and another 30mins  */

    #bear-nest {
      display:flex;
      flex-direction:row;
      justify-content:flex-end;
      align-items:center;
    }

    img {
      border-radius:20%;
     display: block;
margin-left: auto;
margin-right: auto;}


    #bear > p {
      text-align:center;
      margin-left:auto;
      margin-right:auto;
      width:70%;
    }

    hr {
      border: 1px solid black;
    }



    .middle {
      display:flex;
      justify-content:center;
     align-self:flex-start;
    }

    }
<body>
<nav>
  <div id="main-content">
  <div id="container" >
    <a id="main" class="bonus" href="#">Main</a>
    <a id="information" class="bonus" href="information.html">Information</a>
    <a id="contacts" class="bonus" href="contacts.html">Contacts</a>
    <a id="media" class="bonus" href="media.html">Media</a>
    <a id="logout" href="logout.html">Log out</a>
    
</div>
  </div>
</nav>

<main>
  <div id="bear-nest">
  <div id="american-bear-nest">
    <div class="middle">
      <p>The American black bear</p>
    </div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/01_Schwarzb%C3%A4r.jpg/220px-01_Schwarzb%C3%A4r.jpg" alt="bear" title="The American black bear">
    <div id="bear"><p>The American black bear (Ursus americanus) is a medium-sized bear native to North America. It is the continent's smallest and most widely distributed bear species. Black bears are omnivores, with their diets varying greatly depending on season and location. They typically live in largely forested areas, but do leave forests in search of food. Sometimes they become attracted to human communities because of the immediate availability of food. The American black bear is the world's most common bear species.

    It is listed by the International Union for Conservation of Nature (IUCN) as a least-concern species, due to its widespread distribution and a large population estimated to be twice that of all other bear species combined. Along with the brown bear, it is one of only two of the eight modern bear species not considered globally threatened with extinction by the IUCN. American black bears often mark trees using their teeth and claws as a form of communication with other bears, a behavior common to many species of bears.</p><hr></div>

    <div class="middle">
      <p>Asian black bear</p>
    </div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG/220px-Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG" alt="asian bear" title="Asian black bear">
    <div id="bear"><p>The Asian black bear (Ursus thibetanus, previously known as Selenarctos thibetanus), also known as the moon bear and the white-chested bear, is a medium-sized bear species native to Asia and largely adapted to arboreal life.[2][3] It lives in the Himalayas, in the northern parts of the Indian subcontinent, Korea, northeastern China, the Russian Far East, the Honshū and Shikoku islands of Japan, and Taiwan. It is classified as vulnerable by the International Union for Conservation of Nature (IUCN), mostly because of deforestation and hunting for its body parts.[1]

The species is morphologically very similar to some prehistoric bears, and is thought by some scientists to be the ancestor of other extant bear species (aside from pandas and spectacled bears).[2] Though largely herbivorous, Asian black bears can be very aggressive toward humans, who frequently trap or kill them for traditional medicine.[4] </p></div>

</div>
</div>


</main>
  

  
</body>

是的,我知道margin-left:auto会有所帮助,但是我想知道是否还有其他选择?我知道justify-content / align-items / align-self。但是他们似乎都没有将注销按钮按下到底。那么这是怎么回事?我无法弄清楚,因此,对于为什么它似乎不起作用的任何建议将不胜感激。谢谢。

0 个答案:

没有答案