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>

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

你可以使用display：flex with justify-content：space-between，然后设置“居中”元素来增长。

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

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

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

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

2 个答案: