0

我在页面顶部有一个导航栏。在它的右侧，我有一个导航项列表，它们是列表项。这个 ul 在一个 div 项中。 在此处输入图像描述

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>David Chu's China Bistro</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css2?family=Lora&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
  </head>

<body>
  <header>
   <nav id="header-nav" class="navbar navbar-expand-md"> 
    <div id="navbarNav" class="collapse navbar-collapse">
       <ul id="nav-list" class="nav navbar-nav navbar-right">
        <li>
          <a href="menu-categories.html">
            <span class="material-icons">
            restaurant_menu
            </span><br class="d-none d-md-block"> Menu</a>
        </li>
        <li>
          <a href="#">
            <span class="material-icons">
              info
            </span><br class="d-none d-md-block"> About</a>
        </li>
        <li>
          <a href="#">
            <span class="material-icons">
              emoji_events
            </span><br class="d-none d-md-block"> Awards</a>
        </li>
        <li id="phone" class="d-none d-md-block">
          <a href="tel:410-602-5008">
            <span>410-602-5008</span></a><div>* We Deliver</div>
        </li>
      </ul>
     </div>
    </nav>
  </header>

</body>
</html>

问题是，这个 div 在右侧有一个很大的空间，如图所示。当屏幕宽度扩大时，这会导致电话号码上升。我希望这个列表项右对齐，所以当屏幕展开时什么都不会改变。

在此处输入图像描述

我正在使用 Bootstrap 4。我已经查看了有关 flex 的所有内容，但没有任何结果。顺便说一句，我正在尝试创建一个响应式导航菜单，它将根据屏幕大小折叠。这就是我使用这个类的原因。

我想要这些物品在每种情况下都如图 1 所示。（电话号码在其他人的下方）

       body {
  font-size: 16px;
  color: #fff;
  background-color: #61122f;
  font-family: 'Oxygen', sans-serif;
}

/** HEADER **/
#header-nav {
  background-color: #f6b319;
  /*position: relative;*/
}

#logo-img{
    background: url('../images/restaurant-logo_large.png') no-repeat; 
    width: 150px;
    height: 150px;
    margin: 10px 15px 10px 0;
}

a.navbar-brand {
  padding-top: 25px;
  font-family: 'Lora', serif;
  color: #557c3e;
  font-weight: bold;
  font-size: 1.5em;
  text-transform: uppercase;
  text-shadow: 1px 1px 1px #222;
  line-height: .75;
}

.navbar-brand a:focus, .navbar-brand a:hover{
    text-decoration: none;
}

p.kosher {
    text-transform: uppercase;
    margin-top: 10px;
    color: #000;
    font-size: .7em;
}

p.kosher span{
    vertical-align: middle;
}

#nav-list {
  margin-top: 10px;
}
#nav-list > li {
    margin-right: 15px;
}

#nav-list a {
  color: #951C49;
  text-align: center;
}
#nav-list a span {
  font-size: 1.8em;
}
#phone {
  margin-top: 5px;
}
#phone a { /* Phone number */
  text-align: right;
  padding-bottom: 0;
}
#phone div { /* We Deliver */
  color: #557c3e;
  text-align: right;
  padding-right: 15px;
}

button.navbar-toggler{
  clear: both;
  margin-top: -70px;
  margin-right: 0px;
}
li > a:hover, li > a:focus {
  text-decoration: none;
}
#nav-list {
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  max-width: 220px;
}

#nav-list li:last-child {
  width:100%;
  margin-right:0px;
}
4

1 回答 1

0

所以首先，我们必须添加max-width一个#navbarNav：

#navbarNav{
  max-width:220px;
}

然后，在#nav-list 中，我们添加以下代码：

#nav-list {
    margin-top: 10px;
    display:flex;
    justify-content:space-between;
}

#navbarNav现在，您要向右对齐。我们有几种方法可以做到这一点。首先是使用 flexbox。如果要执行此步骤，则必须将以下代码添加到#navbarNav. 哪个是#header-nav：

#header-nav{
  display:flex;
  justify-content:flex-end;
}

但是，这可以确保#header-nav 中的所有内容都与右侧对齐。因此，如果您没有在 中添加任何其他内容，则#header-nav可以轻松使用此代码。

于 2020-08-28T12:58:22.213 回答