时间戳

首页 > 解决方案 > 需要帮助将我的导航栏链接居中，因为在右侧添加了搜索栏。任何人？

html - 需要帮助将我的导航栏链接居中，因为在右侧添加了搜索栏。任何人？

问题描述

我的链接很好地位于我的徽标下方的中心，现在我添加了一个搜索栏并将其放在右侧，因为我想要它，我现在唯一的问题是我不能再让我的链接居中了：-/ 任何人都知道一个解决方案所以我仍然可以将导航栏链接居中吗？

                           /*Topnav*/
.topnav { 
    width: 100%; 
    opacity: 1;
    background-color: rgba(255,255,255,0.6);
    margin-bottom: 10px; 
    padding: 5px 0px 5px 0; 
	border-bottom: dotted #66A761;
	border-top: dotted #66A761;
}

.topnav ul {
    text-align: center;
}

.topnav ul li {
    display: inline; 
    margin-left: 15px;	
}

.topnav a {
    font-size: 20px; 
    font-weight: bold; 
    text-decoration: none;
}

.topnav a:visited {
    color: #FFF;
}

.topnav a:link {
    color :#9F257D;
}

.topnav a:hover {
    color: #66A761;
}

.topnav input {
	float: right;
	padding: 3px;
	margin: 0 5px;
}
                           <!--Topnav-->
<div class="topnav">
	<nav>
	<ul>
		<li><a href="aboutblank.html">recepten</a></li>
        <li><a href="aboutblank.html">varianten</a></li>
		<li><a href="aboutblank.html">contact</a></li>
		<li><a href="aboutblank.html">over ons</a></li>
        <input type="text" placeholder="Search..">
	</ul>
	</nav>
</div>

标签： htmlcssnavbar

解决方案

对 css 进行以下更改

    .topnav input {
      float: right;
      padding: 3px;
      margin: 0 5px;
      position: absolute; //input will hover on the navbar
      right: 20px; //this gives a bit of padding to the right
    }
    .topnav {
      width: 100%;
      opacity: 1;
      background-color: rgba(255, 255, 255, 0.6);
      margin-bottom: 10px;
      padding: 5px 0px 5px 0;
      border-bottom: dotted #66A761;
      border-top: dotted #66A761;
      position:relative; //this allows the navbar to be the anchor to child elements with position absolute
    }

导航按钮没有居中，因为搜索栏的位置是静态的，因此如果您将其设置为绝对，它将浮动在您的导航栏上。请注意，您必须将导航栏更改为相对位置，因为您希望搜索栏锚定到该元素。

HTML：

<div class="topnav">
    <nav>
    <ul>
        <li><a href="aboutblank.html">recepten</a></li>
        <li><a href="aboutblank.html">varianten</a></li>
        <li><a href="aboutblank.html">contact</a></li>
        <li><a href="aboutblank.html">over ons</a></li>
        <input type="text" style="right:0" placeholder="Search..">
    </ul>
    </nav>
</div>

推荐阅读