Question

我在我的横幅上工作，但我不能为我的生活弄清楚如何在我的徽标和登录链接之间留出空白空间。以下是迄今为止我所拥有的：imgur.com/a/2pfjI 我觉得我很接近，但我无法解决它！

继承HTML：https://pastebin.com/Z1v3UdDB 继承我的CSS：https://pastebin.com/SnjH8jZj

我希望左侧有我的徽标，旁边有两个链接，然后是最右边有登录/注册的空间，几乎与页面边缘齐平。有点像这样

标志......链接1 | Link 2 .............. space here ......................登录/注册

提前致谢！如果您需要更多信息，请告诉我

Answer 1

<body>
    <div class="header flex">
        <a href="index.php"><img src="imgs/logo.png"></a>
        <ul class="nav flex">
            <li><a href="browse.php">Browse</a> | <a href="create.php">Create</a> </li>
            <li><a href="login.php">Login</a></li>
        </ul>
    </div>
</body>

不需要所有额外的div。

为.header和ul添加了展示展示。为了清晰起见，将display:flex保留为自己的类，以便您可以看到我在html中添加它的位置。

给ul宽度为100％。

然后将justify-content: space-between添加到ul。

这是一个预览http://localhost:8080/bundle.js:3702:1

的bin

这可能是了解有关flexbox的更多信息的最佳起点：http://localhost:8080/bundle.js:5252:1
这是一款非常适合练习的游戏：http://localhost:8080/bundle.js:4238:1
如果你有时间并且认真，这是一个很棒的免费课程：http://localhost:8080/bundle.js:4238:1

Answer 2

了解此示例。这是我如何使用flexbox设置标头。主要更改：使用box-sizing：border-box，flexbox和margin：auto来控制弯曲项目的位置。

＆＃13;

<figure class='figure_container'>
  <img src='https://lumiere-a.akamaihd.net/v1/images/dory_characters_0afa6e45.jpeg?region=0%2C0%2C1200%2C778' />
</figure>

＆＃13;

* {
   box-sizing: border-box;
}

body {
    background-color: #181926;
    color: white;
    margin-top: 5%;
}

a {
    color: black;
    text-decoration: none;
}
a:hover {
    color: rgb(101, 172, 255);
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 70px;
    padding: 0 20px;
    background-color: white;
    top: 0;
    left: 0;
}

.nav {
  margin: 0 auto 0 100px;

}
.nav ul {
  display: flex;
  list-style-type: none;
  color: black;
}

.separator {
  margin: 0 10px;;
}

＆＃13;

Answer 3

首先，你可以在你的头部链接bootstrap，如

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

然后尝试使用

<ul class="nav">
  <li class="nav-item" id="logo">
     <a class="nav navbar-nav navbar-left" href="index.php"><img src="imgs/logo.png"></a>
  </li>
   <li class="nav-item">
     <a class="nav navbar-nav navbar-center" href="browse.php">Browse</a>
  </li>
  <li class="nav-item">
     <a class="nav navbar-nav navbar-center" href="create.php">Create</a>
  </li>
  <li class="nav-item">
    <a class="nav navbar-nav navbar-right" href="login.php">Login</a>
  </li>
</ul>

然后在css

.navbar-nav.navbar-center {
position: absolute;
left: 50%;

试试..

如何在导航栏之间创建空格？

3 个答案: