Float：right and text-align：right does not work

所以我想讓右側的「Home」，「Portfolio」和「Contact」列表元素成爲可能。我試過float：right和text-align：對，但是他們都不適合我，我不知道什麼是錯的。我正在使用bootstrap，這是我的新手，也許這就是問題所在？
這是我的HTMLFloat：right and text-align：right does not work

<!DOCTYPE html> 
    <html lang = "en"> 

    <head> 


     <meta charset = "utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
     <meta name="description" content=""> 
     <meta name="author" content=""> 

     <title>Webworld</title> 
     <link rel= "stylesheet" href = "bootstrap4 copy.css"> 
     <link rel = "stylesheet" href = "style.css"> 
     <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet"> 

    </head> 
    <body id="page-top"> 
    <nav class="navbar fixed-top navbar-toggleable-md navbar-light" id="mainNav"> 
      <a class="navbar-brand cursive" href="#page-top" style="text-decoration:none;">Webworld</a> 
      <div class="collapse navbar-collapse" id="navbarExample"> 
       <ul class="navbar-nav text-right"> 
        <li class="nav-item"> 
         <a class="nav-link" href="#home" style="text-decoration:none;">Home</a> 
        </li> 
        <li class="nav-item"> 
         <a class="nav-link" href="#portfolio" style="text-decoration:none;">Portfolio</a> 
        </li> 
        <li class="nav-item"> 
         <a class="nav-link" href="#contact" style="text-decoration:none;">Contact</a> 
        </li> 
       </ul> 
       <hr> 
      </div> 
    </nav> 
    <header> 
    <div class="container white"> 

    </div> 
    </header> 
    </body> 
    </html> 





<!-- This is the css! --> 
.cursive { 
    font-family:Pacifico; 
    font-size:27px; 
} 


li{ 
    font-size:14px; 
} 


nav { 
    border-radius:1px; 
    border-bottom:solid white 1px; 
    text-align:right; 
    height:90px; 
    margin-left:200px; 
    margin-right:200px; 
} 


.navbar-light .navbar-nav .nav-link, .navbar-light .navbar-brand{ 
    color: #fff; 
    float:right; 
    text-align:right; 
}

沒有這些工作

.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-brand:hover{ 
    color: #fff; 
} 


.navbar-light .navbar-nav .nav-link:active, .navbar-light .navbar-brand:active{ 
    color: #fff; 
} 


header { 
    background-image:url(contact-1920x580.jpg); 
    width:100%; 
    height:358px; 
} 


.white { 
    height:600px; 
    width:100%; 
    top:370px; 
} 


ul .navbar-nav .text-right{ 
    position:relative; 
    float:right; 
} 


li { 
    float:right; 
    clear:right; 
}

來源

2017-07-14 Dhruv

沒有必要額外的CSS來對齊它。只需在'navbar-nav'上使用'ml-auto'將其「推」到右邊。 https://www.codeply.com/go/KbfmpKdAws – ZimSystem

的這是你需要什麼？我使用了一個flexbox來製作一個右側對齊的水平菜單。

.cursive { 
 
    font-family: Pacifico; 
 
    font-size: 27px; 
 
} 
 

 
li { 
 
    font-size: 14px; 
 
    padding: 1em; 
 
    list-style: none; 
 
} 
 

 
nav { 
 
    border-radius: 1px; 
 
    border-bottom: solid white 1px; 
 
    height: 90px; 
 
    margin-left: 200px; 
 
    margin-right: 200px; 
 
} 
 

 
.navbar-light .navbar-nav .nav-link, 
 
.navbar-light .navbar-brand { 
 
    color: blue; 
 
} 
 

 
.nav-item a { 
 
text-decoration: none; 
 
} 
 

 
.navbar-nav { 
 
padding: 0; 
 
margin: 0; 
 
display: flex; 
 
justify-content: flex-end; 
 
}

<nav class="navbar fixed-top navbar-toggleable-md navbar-light" id="mainNav"> 
 
    <a class="navbar-brand cursive" href="#page-top" style="text-decoration:none;">Webworld</a> 
 
    <div class="collapse navbar-collapse" id="navbarExample"> 
 
    <ul class="navbar-nav"> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#home">Home</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#portfolio">Portfolio</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#contact">Contact</a> 
 
     </li> 
 
    </ul> 
 
    <hr> 
 
    </div> 
 
</nav> 
 
<header> 
 
    <div class="container white"> 
 
    </div> 
 
</header>

來源

2017-07-14 11:57:57 Gerard

是的，這是它，謝謝！ – Dhruv

刪除<hr>並在您<ul>添加ml-auto類。

Codepen

來源

2017-07-14 12:04:39 fen1x

Float：right and text-align：right does not work

回答

相關問題