当我的搜索栏居中时，无法使我的下拉内容与搜索栏对齐.我能做什么

Question

搜索栏位于该表导航栏的中心。很明显，我还没有包含很多代码，所以如果有人想查看我的所有代码，请询问，因为我真的很难做到这一点。这是有效的，但是下拉内容似乎在它的td elemnt中左对齐。请帮助

这是html

<table class="navbar-table">
<tr>
<!-- <td style= "margin: 0px 0px; padding: 0px 0px"><span class="sidenav_btn">&#9776;  Menu</span></td> -->
<td style= "margin: 0px 0px; padding: 0px 0px; width:33.33%; float: left;">
<div class="dropdown">
<span class="dropbtn">&#9776;  Menu</span>
<div class="dropdown-content">
<a href="../index.html">Home</a>
<a href="../leaderboard.html">Leaderboard</a>
<a href="../about_us.html">About Us</a>
<a class="active" href="slide1.html">Slides</a>
<a style=" display: none;" id= "profile-button-text" href= "../profile/achievements.html" >Profile</a>
<a style= "background-color: #ab727a; display: none;" id= "logout-button-text">Log Out</a>
</div>
</div>
</td>
<td class= "search_bar_td">
<div class="dropdown-search">
<input autocomplete="off" class= "search_bar" name="search" placeholder="Search..">
<div class="dropdown-search-content">
<a href="../index.html">Home</a>
<a href="../leaderboard.html">Leaderboard</a>
<a href="../about_us.html">About Us</a>
<a class="active" href="slide1.html">Slides</a>
<a style=" display: none;" id= "profile-button-text" href= "../profile/achievements.html" >Profile</a>
<a style= "background-color: #ab727a; display: none;" id= "logout-button-text">Log Out</a>
</div>
</div>
</td>

<td style= "margin: 0px 0px; padding: 0px 0px; width:33.33%;">
<ul style= "margin: 0px 0px; padding: 0px 0px;">
<li class="navbar-logsin" id= "signup-button" style=" background-color: #72ab99">
<a class= "topnav_a" id= "signup-button-text">Sign Up</a>
</li>
<li class="navbar-logsin" id= "login-button" style=" background-color: #73a872">
<a class= "topnav_a" id= "login-button-text">Login</a>
</li>
</ul>
</td>
</tr>
</table>

这是css

.search_bar {
width: 240px;
float: none;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
padding: 6px 10px 6px 30px;
margin: 0 auto;
outline: none;
}
.search_bar_td {
float: center; 
width: 33.33%;
margin: 6px 0px;
padding: 0px 0px;
}


.dropdown-search {
width:100%;
margin:0 auto;
padding: 0px 0px;
float: center;
display:block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
}
.dropdown-search-content {
display: block;
position: absolute;
background-color: #f9f9f9;
height: 0px;
width: 0px;
max-height:150px;
overflow-y:scroll;
z-index: 1;
float: center;
margin: 6px 0px;
}

.search_bar:focus + .dropdown-search-content {
height: auto;
width: 240px;
}

Answer 1

正如@cloned所说，您根本不需要使用表。对于这种类型的东西，我建议使用flexbox。这是一个基本的导航栏，带有搜索输入，所有内容都居中对齐。为了解决您的问题，我只简单地将搜索下拉列表相对于父包装进行了绝对定位

nav {
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
}
nav > ul {
	 display: flex;
	 align-items: center;
	 list-style: none;
	 width: 70%;
	 justify-content: space-around;
	 margin-left: 0px;
	 padding-left: 0px;
}
nav .search {
	 width: 30%;
position: relative;
}
.search ul {
list-style: none;
position: absolute;
left: 0;
padding-left: 0px;
}

<nav>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
</ul>
<div class="search">
<input type="text" name="" id="searc-bar">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
</nav>