html - Css 中心对齐显示 :flex navbar-6ren

html - Css 中心对齐显示 :flex navbar

转载作者：行者123 更新时间：2023-11-27 22:56:38

27

4

我如何居中对齐导航栏？

我认为问题出在 display: flex 上。我试过:

display: inline-block;
text-align: center;
justify-content: center;

在 ul 标签上。这似乎不起作用。有没有办法绕过 display:flex 相关问题？

我将边距和填充设置为 0。另外，是否可以将整个网站的边距设置在 300 像素之间？

源代码:

* {
  margin: 0;
  padding: 0;
}

body {}

h1 {
  font-weight: normal;
  font-size: 40px;
  font-family: 'Black Han Sans', sans-serif;
}

.menu-1 {
  display: inline-block;
  text-align: center;
  justify-content: center;
}

.menu-1 ul {
  width: 800px;
  justify-content: center;
  display: flex;
  list-style-type: none;
  background-color: #e9e9e9;
  border: 0.5px solid #000000;
}

.menu-1 ul li {
  width: 150px;
  flex: 1;
  border-left: 0.5px solid #000000;
  font-size: 14px;
  font-family: 'Jua', sans-serif;
}

.menu-1 ul li a {
  display: block;
  padding: 8px;
  text-decoration: none;
  color: black;
}

.menu-1 ul li:hover a {
  background-color: #ddd;
  text-decoration: none;
  border-top: 0.5px solid black;
}

.menu-1 ul li:active a {
  background-color: black;
  color: white;
  text-decoration: none;
}

<!DOCTYPE html>
<html lang='en, ko'>

<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Black+Han+Sans&display=swap&subset=korean" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Jua&display=swap" rel="stylesheet">
  <style>

  </style>
</head>


<body>
  <br>

  <div class="headings">
    <h1>
      <img src="logo_refined2.jpg" alt="Logo_Img" width="80" height="45">
      <a href="#" style="text-decoration: none; color:black;">간장공장</a>
    </h1>
  </div>


  <nav class="menu-1">
    <ul>
      <li style="border-left:0.5px solid #e9e9e9;"><a href="#">커뮤니티</a></li>
      <li><a href="#">식단</a></li>
      <li><a href="#">갤러리</a></li>
      <li><a href="#">마켓</a></li>
    </ul>
  </nav>


</body>

</html>

最佳答案

display:flex 很好(不是 inline-block)，然后你给 800px width ul ，你可以删除它，因为你还给 li + flex:1; 一个 width (宽度是然后像 min-width，flex:1 告诉它增长以填充 ul)。

下面这似乎是您尝试做的:

* {
  margin: 0;
  padding: 0;
}

body {}

h1 {
  font-weight: normal;
  font-size: 40px;
  font-family: 'Black Han Sans', sans-serif;
}

.menu-1 {
  display:flex;
  text-align: center;
  justify-content: center;
}

.menu-1 ul { 
  justify-content: center;
  display: flex;
  list-style-type: none;
  background-color: #e9e9e9;
  border: 0.5px solid #000000;
}

.menu-1 ul li {
  width: 150px;
  flex: 1;
  border-left: 0.5px solid #000000;
  font-size: 14px;
  font-family: 'Jua', sans-serif;
}

.menu-1 ul li a {
  display: block;
  padding: 8px;
  text-decoration: none;
  color: black;
}

.menu-1 ul li:hover a {
  background-color: #ddd;
  text-decoration: none;
  border-top: 0.5px solid black;
}

.menu-1 ul li:active a {
  background-color: black;
  color: white;
  text-decoration: none;
}

<!DOCTYPE html>
<html lang='en, ko'>

<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Black+Han+Sans&display=swap&subset=korean" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Jua&display=swap" rel="stylesheet">
  <style>

  </style>
</head>


<body>
  <br>

  <div class="headings">
    <h1>
      <img src="logo_refined2.jpg" alt="Logo_Img" width="80" height="45">
      <a href="#" style="text-decoration: none; color:black;">간장공장</a>
    </h1>
  </div>


  <nav class="menu-1">
    <ul>
      <li style="border-left:0.5px solid #e9e9e9;"><a href="#">커뮤니티</a></li>
      <li><a href="#">식단</a></li>
      <li><a href="#">갤러리</a></li>
      <li><a href="#">마켓</a></li>
    </ul>
  </nav>


</body>

</html>

关于html - Css 中心对齐显示 :flex navbar，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59225841/

27

4

0

文章推荐： css - 在 CSS 文件中访问 Laravel 的公共(public)文件夹

文章推荐： c++ - Makefile 获取目录中的所有目标文件

文章推荐： c++ - WinKill() 源代码

文章推荐： c++ - 头文件和附加库

javascript - $ (".navbar.navbar-inverse").click() 有效，但 $ (".navbar .navbar-inverse").click() 无效？
我仍在学习网页设计的诀窍，并且我无法理解一些事情是如何工作的...... 我创建了一个函数来切换导航栏标题背景颜色，我发现以下内容是正确的，但不确定原因: 作品: $(".navbar.navbar-
html - Twitter bootstrap 3 navbar navbar-right outside navbar-collapse
在 Twitter bootstrap 2.3.2 中，我可以有类似的东西: http://jsfiddle.net/aQwUZ/3/
javascript - 当 NavBar 在小屏幕上垂直时如何加载处于折叠状态的 NavBar
我是 bootstrap、jquery 和 javascript 的新手，我在一个网站上工作，但我遇到了一个问题。 . .我需要顶部的导航栏在超小屏幕上以折叠状态加载。现在，该栏在 XS 屏幕上是垂直
css - 为什么导航类名称是 navbar-default 而不是 navbar
我正在学习使用 Ruby on Rails 编写代码，并且正在制作一个随机网页。我添加了 Bootstrap 导航栏。我正在尝试将导航栏的边框更改为无，而不是: .navbar { bord
angular - 中的 "*navbar "是什么意思？
每当我学习 ionic 的教程时，我都会看到短语 *navbar。这是什么意思？我知道 * 表示它在模板中插入标签，但无法真正理解这个表达式.. 最佳答
javascript - Bootstrap 2 navbars 1 navbar 动态关闭
我不知道如何正确表达这一点，但我想做的是让顶部栏( http://puu.sh/iNdBj/7f11027db0.png )在向下滚动时折叠并在回到顶部时重新出现，我想让底部栏填充顶栏的位置。目前的
css - 在 navbar-header/navbar-brand 中居中图像
这是我第一次使用 bootstrap，我使用 roots 主题作为准系统模板。我在 header-top-navbar.php 的 navbar-header 元素中放置了一个图像我还将它放在一个 d
javascript - 如何在滚动时将 navbar-default 更改为 navbar-inverse？
在我网站的顶部，主要的导航类是: navbar navbar-default navbar-fixed-top bg 我正在努力做到这一点，当你滚动时，类会更改为这样我就可以创建一个更优雅、更简单的滚
html - Bootstrap : navbar-colapse div enters navbar
这是我的问题: collapse problem 如您所见，我的 navbar-collapse div 进入了导航栏区域。你能帮我解决一下吗？ Title
html - Bootstrap NavBar 如何更改 Navbar-Brand 类上的文本颜色？
我已经为类尝试了很多不同的选项来更改 navbar 上的文本颜色，特别是 navbar-brand 元素。我的 .navbar-brand color:purple; CSS 类没有运行。你能帮我弄清
jquery - nav navbar-nav navbar-right 下拉内容不会在移动设备上向下推送菜单项
我正在尝试使用 nav navbar-nav navbar-right 创建一个下拉菜单。我让它在移动设备(较小的屏幕)上对齐但是当我点击下拉菜单时它不会将菜单项向下推但是而是下拉其他菜单项。我不确定
css - 我的 Navbar.css 没有改变我的 Navbar.jsx
我的导航栏没有改变颜色。 Navbar.jsx 文件中的 Navbar.css 文件的路径是否正确？ import React, { Component } from 'react'; import
css - navbar-header 和 navbar-nav 没有对齐
我无法让我的 navbar-header 和 navbar-nav 元素正确排列。 navbar-header 在 navbar 中垂直居中，而 navbar-nav 看起来像是 align="top
html - navbar-nav 被推到 navbar-brand 下面？
当我的屏幕宽度达到 767px 时，导航会异常折叠。当我转到 768px 时，navbar-nav 会低于 navbar-brand。直到我达到 795px，navbar-brand 和 navbar
css - Bootstrap navbar navbar-fixed-top 在一定尺寸后崩溃
我正在尝试实现一个固定的导航栏，但是在一定的屏幕尺寸(〜宽度:989)之后，导航栏向下移动。它也不适用于移动设备。图片: 导航栏完全贴在页脚上，而不是停留在页面顶部。您可以在以下位置查看代码:ht
css - 对齐 NavBar Right 导致 NavBar 禁用
我正在尝试右对齐我的 NavBar，但每当我添加 float:right 时，导航栏都会向右移动，但似乎已禁用。参见此处:goo.gl/46yUrt 代码: /** * 4.2 Navigatio
html - Navbar-toggler 搞乱了 navbar-brand 排列
我正在使用 Bootstrap 4，我希望我的 navbar-toggler 出现在 navbar-brand 之前，例如 this ，但是如果我将 navbar-toggler 放在第一位，我的对齐
html - Bootstrap navbar - 如何使 navbar-header 全宽
如何使 navbar-header 全宽或单独成一行？我在 collapse navbar-collapse 上添加了 clear:both; 但所有的填充都弄乱了。
html - CSS 中 .navbar 和 .navbar a 的区别
.navbar 和 .navbar a 有什么区别 .navbar { overflow: hidden; background-color: #333;
css - 单独的 navbar 和 navbar-inner 类的目的是什么？
在 Twitter bootstrap 的 starter-template.html 中，navbar 写成 ... 但是，如果我将标记更改为

首页

博学

6Ren·AI

商城

html - Css 中心对齐显示 :flex navbar