Question

我正在尝试在中间创建一个带有徽标的导航栏，导航栏项目彼此之间的距离相同。像这样：

但是，我在使导航栏响应时遇到问题。从截图中可以看出，徽标和链接之间的距离并不相等。

 header {
  width: 100%; 
  margin: 0 auto;
}

#logo {
    text-align: center;
}

.nav {
    text-align: center;
}

.nav li {
  display: inline;
  margin-left: 7em;
  margin-right: 7em;
}

/* use media query to change the layout */
@media  (min-width: 768px) {
    body {
        background-color: #f2f2f2;
    }

    .nav {
        margin-top: -42px;
    }

    .nav li:nth-child(1), .nav li:nth-child(2) {
        float: none;
    }

    .nav li:nth-child(3), .nav li:nth-child(4) {
        float: none;
    }
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

<header>
  <div class="container">
    <h2 id="logo">Logo</h2>
    <ul class="nav">
        <li><a href="#">Work</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Social</a></li>
    </ul>
  </div>
</header>

Answer 1

您可以使用flexbox，查看flexbox here

的基础知识

我已更新您的代码以使用flexbox。

我已将徽标移至<header> <div class="container"> <ul class="nav"> <li><a href="#">Work</a></li> <li><a href="#">About</a></li> <li><h2 id="logo">logo</h2></li> <li><a href="#">Contact</a></li> <li><a href="#">Social</a></li> </ul> </div> </header>元素。

.nav

我已将您的CSS更新为使用flexbox，请注意display:flex现在有header { width: 100%; } #logo { text-align: center; margin-top:0; } .nav { text-align: center; display:flex; } .nav li { flex: 1; display: inline; } /* use media query to change the layout */ @media (min-width: 768px) { body { background-color: #f2f2f2; } .nav { } .nav li:nth-child(1), .nav li:nth-child(2) { float: none; } .nav li:nth-child(3), .nav li:nth-child(4) { float: none; } } .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } }。

public function editchecksave(Request $request)
{
    $id = $request->id;
    $username = $request->username;
    $attribute = $request->attribute;
    $value = $request->value;
    $op = $request->op;

    $result = DB::update('update radcheck set username = "?" , 
        attribute="?",value="?" ,op="?" where id = ?', 
        [$username,$attribute,$value,$op,$id]
    );

    if ($result)
    {
        return response()->json([ 'msg' => 'Updated Successfully' . $username]);
    }

    return response()->json([ 'msg' => 'Not Updated Successfully'. $value]);
}

这应该足以让你前进。继承人codepen

Answer 2

更新了以下CSS并在ul

中保留了标题

    header {
      width: 100%; 
      margin: 0 auto;
    }


    .nav {
    text-align: center;
      display: flex;
      justify-content: space-between;
    }

    .nav li {
      display: inline;
    }
    h2 {
      margin-top: 0;
    }

＆＃13;

header {
  width: 100%; 
  margin: 0 auto;
}


.nav {
text-align: center;
  display: flex;
  justify-content: space-between;
}

.nav li {
  display: inline;
}
h2 {
  margin-top: 0;
}
/* use media query to change the layout */
@media  (min-width: 768px) {
body {
    background-color: #f2f2f2;
}

.nav li:nth-child(1), .nav li:nth-child(2) {
    float: none;
}

.nav li:nth-child(3), .nav li:nth-child(4) {
    float: none;
}
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
width: 1170px;
  }
}

＆＃13;

<header>
  <div class="container">

<ul class="nav">
    <li><a href="#">Work</a></li>
    <li><a href="#">About</a></li>
    <li><h2 id="logo">Logo</h2></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Social</a></li>
</ul>
  </div>
</header>

＆＃13;

Answer 3

您也可以使用flex-box;

代替grid

.header {
  width: 100%;
}

.container {
  width: 75%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.container div {
  grid-column: auto / span 1;
  text-align: center;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

<header class="header">
  <div class="container">
    <div><a href="#">Work</a></div>
    <div><a href="#">About</a></div>
    <div><h2 id="logo">Logo</h2></div>
    <div><a href="#">Contact</a></div>
    <div><a href="#">Social</a></div>
  </div>
</header>

现在，如何设置标题的宽度并不重要，所有项目都保持相同的宽度。

Answer 4

这里有一个简单的例子，使用 position：absolute 来标识徽标：

这是HTML

<header>
    <h2 id="logo">Logo</h2>
    <ul class="nav">
        <li><a href="#">Work</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Social</a></li>
    </ul>
</header>

这里是CSS

* { /*Replace this to enable margin and padding*/
    margin: 0;
    padding: 0;
}

header {
    width: 100%;
    height: 70px;
    position: relative;
}

#logo {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 70px;
    line-height: 70px;
    top: 0;
    left: 0;
}

.nav {
    width: 100%;
    height: 70px;
}

.nav li {
    width: 25%;
    float: left;
    box-sizing: border-box;
    text-align: center;
    list-style: none;
    line-height: 70px;
}

如果徽标是图像（正如我想的那样），你可以使用这个小技巧：

#logo {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px; /*If logo height is 40px*/
    margin-left: -30px; /*If logo width is 60px*/
}

如您所见，我使用顶部和左侧将徽标放在中间，然后将图像宽度和高度的一半放在边缘顶部和边距左侧。

以下是您的徽标是图片的示例：https://codepen.io/Nacorga/pen/yEXaQO

如何使用html和css在中间创建带有徽标的菜单

4 个答案: