个人中心
gpt4 book ai didi

html - 如何使导航栏 Logo 居中，甚至彼此链接？

转载 作者：行者123 更新时间：2023-11-28 07:56:14 25 4
gpt4 key购买 nike

很长一段时间以来，我一直在努力让我的代码正常工作，但我真的不知道如何放入一个表单，这样我的 Logo 就会位于导航栏的中间。我的链接之间的“差距”也不均匀。

我试过这个方法:Centered navigation bar and links

但这并没有帮助。

这是我的代码:

<body>
    <div class="nav">
        <div class="nav-centered">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Art</a></li>
            <li><a class="logo" href="#"></a></li>
            <li class="active"><a href="#">About Me</a><li>
            <li><a href="#">Contact</a></li>
        </ul>
        </div>
    </div>

    </nav>

和CSS:

.nav {
margin-top:200px;
height:120px;
background-color:#B0A2BC;
}

.nav ul {
margin: 0;
padding:0;
width:100%;
display:inline-block;
}

.nav ul li{
list-style:none;
float:left;
width: 20%;
text-align:center;
}

.nav ul li a{
padding:0;
margin:0;
width:100%;
text-align:center;
display:block;
padding:45px 80px;
font-weight:bold;
font-size: 21px;
color:white;
text-decoration: none;
}

.logo {
background:url("logo1.gif");
background-repeat: no-repeat;
height:140px;


}

.nav ul li a:hover, .nav ul li.active a {
color:purple;

}
.nav-centered{
display:table;
margin:0 auto;}

最佳答案

我认为您的问题是您将导航中的 li 元素向左浮动:

.nav ul li{
  list-style:none;
  float:left;        <------ here.
  width: 20%;
  text-align:center;
}

但我可能会采用另一种方式...如果 Logo 两侧的链接数量为偶数，则您的方法有效，但如果它变得不平衡，那么这将不会以您想要的方式居中。

我可能会通过制作一个仅包含 Logo 的居中 DIV 来解决这个问题，并将其宽度设置为 Logo 的宽度(加上您可能需要的任何呼吸空间)。

然后我将两个 DIV 分别设置为 50% 宽度，一个向左浮动，一个向右浮动。并且每个都将在其中心端有填充，等于 Logo DIV 宽度的一半。将文本在左半部分 div 中向右对齐，在右半部分 div 中向左对齐。

最后，将 float DIV 的上边距设置为负值，等于居中 DIV 高度的一半左右。

例子。 HTML:

<div class="logo">
  <a href="home/page/linnk.html"><img src="logoimage.png" width="200" height="200" alt="Your Logo Name" /></a>
</div>
<div class="nav left">
  <ul> ... </ul>       <----- Left-hand links here
</div>
<div class="nav right">
  <ul> ... </ul>       <----- Right-hand links here
</div>

在你的 CSS 中:

div.logo {
  width: 240px;
  height: 200px;
  margin: auto;    <---- to center your logo DIV
  z-index: 10;     <---- make sure the logo DIV is layered above
  text-align: center;   <---- make sure your logo is centered in the DIV.  
                              Alternatively you can use padding
}

div.nav ul { ... } <---- rules to make your UL inline here
div.nav li { ... } <---- and here

div.nav {
  width: 50%;
  margin-top: -100px;     <---- adjust this until it is
                                centered vertically the way you'd like
  z-index: 5;     <---- make this less than the logo DIV
}

div.nav.left {
  float:left;
  text-align: right;
  padding-right: 120px;
}

div.nav.right {
  float:right;
  text-align: left;
  padding-left: 120px;
}

使用这种方法，您的 Logo 将始终居中，无论您在两边放置了多少链接。

关于html - 如何使导航栏 Logo 居中，甚至彼此链接？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30102181/

25 4 0
文章推荐： html - 边框底部不适用于绝对定位
文章推荐： c++ - QWebFrame load() 在初始页面加载时不发送 cookie
文章推荐： javascript - 在 onload 函数中触发 onchange 事件
文章推荐： javascript - 当用户单击按钮并到达底部或顶部时禁用按钮