Question

所以我想让列表元素说“Home”，“Portfolio”和“Contact”在右侧。我试过浮动：右边和文本对齐：对，但它们都不适合我，我不知道出了什么问题。我正在使用bootstrap，我是新手，也许这就是问题？
这是我的HTML

    <!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;
}

Answer 1

这是你需要的吗？我使用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>

Answer 2

删除<hr>并在ml-auto上添加<ul>课程。

Codepen

Float：right和text-align：对不起作用

2 个答案: