Question

我正在尝试创建垂直下拉菜单，但是我无法正确对齐下拉内容。我似乎缩进了，这是我不想要的。下拉文本应垂直对齐

#sidenav{
    margin-top:25%;
    margin-left:25%;
    width:250px;
    max-width:250px;
    background:#454545;


}

#sidenav input {
    box-sizing: inherit;
    width:100%;
    padding:5px;
    margin-top: 5px;
    border:none;
    border-bottom: 2px solid #666666;
    background: transparent;
    color:white;
    font-size: 18px;
    font-style: italic;
    opacity: 0.8;
}

#sidenav  li{
    list-style:none;
    font-size: 18px;
    width:inherit;
    padding:5px 0px 5px 5px;
    position: relative;
    color:#ffffff;
}
#sidenav li::first-letter,#sidenav a::first-letter{
    text-transform: uppercase;
}

#sidenav a{
    text-decoration: none;
    display: block;
    color:#ffffff;
    margin:0px;
}

.dropdown-content{
    background:#666666;
    display: none;
}

.dropdown-bt:hover .dropdown-content{
    display: block;
}

<section id='sidenav'>
<input type="text"placeholder="search..."id='mysearch'onkeyup="filterSearch()">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li class="dropdown-bt">dropdown - content
    <ul class="dropdown-content">
        <li><a href="#">test 1</a></li>
        <li><a href="#">test 2</a></li>
        <li><a href="#">test 3</a></li>
        <li><a href="#">test 4</a></li>
    </ul>
</li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li> 
</section>

下拉内容的左侧留有某种边距我不想要。

Answer 1

如果我对您的理解正确，请从无序列表中删除填充：

ul {
 padding:0;
}

您的情况：

.dropdown-content{
  background:#666666;
  display: none;
  padding:0;
}

Answer 2

其父级（#sidenav li）的填充为5像素，因此您需要以某种方式进行补偿，一种方法是在子级（margin-left: -5px）中进行.dropdown-content

#sidenav{
    margin-top:25%;
    margin-left:25%;
    width:250px;
    max-width:250px;
    background:#454545;


}

#sidenav input {
    box-sizing: inherit;
    width:100%;
    padding:5px;
    margin-top: 5px;
    border:none;
    border-bottom: 2px solid #666666;
    background: transparent;
    color:white;
    font-size: 18px;
    font-style: italic;
    opacity: 0.8;
}

#sidenav  li{
    list-style:none;
    font-size: 18px;
    width:inherit;
    padding:5px 0px 5px 5px;
    position: relative;
    color:#ffffff;
}
#sidenav li::first-letter,#sidenav a::first-letter{
    text-transform: uppercase;
}

#sidenav a{
    text-decoration: none;
    display: block;
    color:#ffffff;
    margin:0px;
}

.dropdown-content{
    background:#666666;
    display: none;
    margin-left:-5px; /*compensate to the 5px padding from its parent*/
    padding: 0; /*optional if you don't want padding inside*/
}

.dropdown-bt:hover .dropdown-content{
    display: block;
}

<section id='sidenav'>
<input type="text"placeholder="search..."id='mysearch'onkeyup="filterSearch()">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li class="dropdown-bt">dropdown - content
    <ul class="dropdown-content">
        <li><a href="#">test 1</a></li>
        <li><a href="#">test 2</a></li>
        <li><a href="#">test 3</a></li>
        <li><a href="#">test 4</a></li>
    </ul>
</li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li> 
</section>

Answer 3

您从未为顶级列表声明无序列表，并且输入字段（搜索）上的填充导致该字段的宽度大于您在容器中设置的最大宽度。为了调整此填充，我修改了填充的应用方式（顶部和底部填充为5px，左侧和右侧为0）。

#sidenav{
    margin-top:25%;
    margin-left:25%;
    width:250px;
    max-width:250px;
    background:#454545;


}

#sidenav input {
    box-sizing: inherit;
    width:100%;
    padding:5px 0px;
    margin-top: 5px;
    border:none;
    border-bottom: 2px solid #666666;
    background: transparent;
    color:white;
    font-size: 18px;
    font-style: italic;
    opacity: 0.8;
}

#sidenav  li{
    list-style:none;
    font-size: 18px;
    width:inherit;
    padding:5px 0px 5px 5px;
    position: relative;
    color:#ffffff;
}
#sidenav li::first-letter,#sidenav a::first-letter{
    text-transform: uppercase;
}

#sidenav a{
    text-decoration: none;
    display: block;
    color:#ffffff;
    margin:0px;
}

.dropdown-content{
    background:#666666;
    display: none;
}

.dropdown-bt:hover .dropdown-content{
    display: block;
}

<section id='sidenav'>
<input type="text"placeholder="search..."id='mysearch'onkeyup="filterSearch()">
	<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li class="dropdown-bt">dropdown - content
    <ul class="dropdown-content">
        <li><a href="#">test 1</a></li>
        <li><a href="#">test 2</a></li>
        <li><a href="#">test 3</a></li>
        <li><a href="#">test 4</a></li>
    </ul>
</li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li> 
	</ul>
</section>

下拉内容未正确对齐

3 个答案: