Html 和 css 导航栏浮动元素需要在同一行

Question

您好，我正在使用 html 和 css 制作导航栏，但我无法使用 bootstrap，而且运行遇到了问题。我遇到的问题是，当我将文本浮动到左侧并将其他一些文本浮动到右侧时，它们最终不在同一行上。这是我想要的样子：

现在是这样的：

这是我的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <title>Menu</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <meta charset="utf-8">
</head>
<body>
    <nav class="group">
        <div class="nav_top">
            <div class="left_opt">
                <p>Option 1</p>
                <p>Option 2</p>
            </div>
            <div class="mid_logo">
                <p>Logo</p>
            </div>
            <div class="right_opt">
                <p>Option 3</p>
                <p>Option 4</p>
            </div>
        </div>
    </nav>
</body>
</html>

这是我的 CSS:

html {
    margin: 0px;
    padding: 0px;
}

body {
    background-color: #777;
    margin: 0px;
    padding: 0px;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

nav {
    background-color: white;
    font-family: helvetica-neue;
    font-size: 20px;
}

.left_opt p {
    float: left;
    display: inline;
}

.mid_logo {
    text-align: center;
    display: inline;
}

.mid_logo p{
    margin-top: 0px;
}

.right_opt p {
    float: right;
    display: inline;
}

我应该怎么做才能让它看起来像第一张图片？我需要一个好的解决方案，因为我需要让它响应。提前谢谢大家！

Answer 1

使用flexbox

结构

<div class="flex">
  <div>left</div>
  <div>center</div>
  <div>right</div>
</div>

.flex内的每个<div>都有一个width: 33.33%。
中心有text-align: center。
右边有text-align: right.

$(".menu-toggle").click(function() {
  $(".menu-toggle > i").toggleClass("hide");
  $(".menu .left, .menu .right").toggleClass("show");
});

body {
  margin: 0;
}

.menu-toggle {
  position: relative;
  cursor: pointer;
  z-index: 1;
  display: none;
}

.menu-toggle>i {
  position: absolute;
  margin: 15px;
}

.menu {
  display: flex;
}

.menu .center {
  text-align: center;
}

.menu .right {
  text-align: right;
}

.menu>div {
  width: 33.33%;
}

.menu p {
  display: inline-block;
  padding: 10px;
}

.hide {
  display: none !important;
}

.show {
  display: block !important;
}

@media screen and (max-width: 767px) {
  .menu-toggle {
    display: block;
  }
  .menu {
    flex-direction: column;
    position: fixed;
    width: 100%;
  }
  .menu>div {
    width: 100% !important;
    text-align: center !important;
  }
  .menu>div p {
    display: block;
    width: 20%;
    margin: 0 auto;
  }
  .menu .center {
    order: 1;
    padding: 15px 0;
  }
  .menu .left>p,
  .menu .right>p:not(:last-child) {
    border-bottom: 1px solid;
  }
  .menu .right>p:last-child {
    margin-bottom: 15px;
  }
  .menu .left {
    display: none;
    order: 2;
  }
  .menu .right {
    display: none;
    order: 3;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="menu-container">
  <div class="menu-toggle">
    <i class="fa fa-close fa-2x hide"></i>
    <i class="fa fa-bars fa-2x"></i>
  </div>
  <nav class="menu">
    <div class="left">
      <p>Option 1</p>
      <p>Option 2</p>
    </div>
    <div class="center">
      <p>Logo</p>
    </div>
    <div class="right">
      <p>Option 3</p>
      <p>Option 4</p>
    </div>
  </nav>
</div>

Answer 2

你可以使用display:flex with justify-content: space-between，然后设置"centered"元素增长。

ul{
  display: flex;
  justify-content:space-between;
}

li.center{
  flex:1;
  text-align:center;
}

https://jsfiddle.net/facundocorradini/gtmgh5h6/1/

Html 和 css 导航栏浮动元素需要在同一行

Html and css navbar floated elements need to be on the same line

html

css

nav

navbar