需要帮助中心我的肚脐链接，因为添加搜索栏在右侧。有没有人？

Question

我有我的链接很好地在我的标志下，现在我添加了一个搜索栏，并在右边打开它，因为我想要它，我现在唯一的问题是，我不能使我的链接中心:-/任何人知道一个解决方案，这样我仍然可以集中我的肚脐链接？

​

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

​

Answer 1

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