现在我有这样垂直方向的下拉菜单:
我正在使用 div (.dropdown, .dropdown-content)
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
outline: none;
background-image: linear-gradient(#F1F1F1, #E5E5E5);
font-family: inherit;
margin: 0;
width: 150px;
height: 160px;
border: 1px solid white;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.dropdown-content {
display: none;
position: absolute;
background-image: linear-gradient(#F1F1F1, #E5E5E5);
border: 1px solid white;
width: 150px;
height: auto;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding-bottom: 10px;
}
如何更改方向和对齐方式?
<div class="dropdown">
<button class="dropbtn" data-showdiv="CO">
<div class="titleh2">Title</div>
<img class="orga" src="picture.png">
<div class="titleh1">Name</div>
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#" class="firstImage">
<img class="orga" src="\untitled.png" />
</a>
<div class="titleh2">Title</div><br>
<div class="titleh3">Name</div>
<hr class="horizontal">
<a href="#">
<img class="orga" src="\untitled.png">
</a>
<div class="titleh2">Title</div><br>
<div class="titleh3">Name</div>
<hr class="horizontal">
<a href="#">
<img class="orga" src="\untitled.png">
</a>
<div class="titleh2">Title</div><br>
<div class="titleh3">Name</div>
</div>
</div>
最佳答案
您可以使用 FlexBox 来获得想要的结果。请记住,flexbox 是全新的,在旧版浏览器中不受支持。
我做了什么:
将 dropdown-content
的显示设置更改为 display:flex;
并添加 flex-direction: row
以水平对齐它们。
然后我用一个 div 包装了所有下拉元素,以便在需要时为下拉列表的每个元素提供一些样式。
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
outline: none;
background-image: linear-gradient(#F1F1F1, #E5E5E5);
font-family: inherit;
margin: 0;
width: 150px;
height: 160px;
border: 1px solid white;
border-radius: 5px;
}
.dropdown-content {
/*display: none; //Change this to display flex, with the flex-direction to align the items horizontally*/
display: flex;
flex-direction: row;
position: absolute;
background-image: linear-gradient(#F1F1F1, #E5E5E5);
border: 1px solid white;
height: auto;
border-radius: 5px;
padding-bottom: 10px;
}
.dropdown-content-element{
margin: 2px 5px;
padding: 5px;
}
<div class="dropdown">
<button class="dropbtn" data-showdiv="CO">
<div class="titleh2">Title</div>
<img class="orga" src="picture.png">
<div class="titleh1">Name</div>
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="dropdown-content-element">
<a href="#" class="firstImage">
<img class="orga" src="\untitled.png" />
</a>
<div class="titleh2">Title</div>
<div class="titleh3">Name</div>
</div>
<div class="dropdown-content-element">
<a href="#">
<img class="orga" src="\untitled.png">
</a>
<div class="titleh2">Title</div>
<div class="titleh3">Name</div>
</div>
<div class="dropdown-content-element">
<a href="#">
<img class="orga" src="\untitled.png">
</a>
<div class="titleh2">Title</div>
<div class="titleh3">Name</div>
</div>
</div>
</div>
这是一个小备忘单,可以帮助您开始使用 FlexBox .
编辑: 这有效,但没有以选定的 super 菜单项为中心。但你会自己实现的,我相信你!
哦,顺便说一下:如果所有规则都相同,您可以用 border-radius: 5px;
总结您的 border-radius 规则。节省一些空间并保持更好的可读性。
编辑 2:
这里是一个使用 ul
和 li
来获得类似结果的例子。 @Moose 在他的一条评论中建议使用此方法。
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
outline: none;
background-image: linear-gradient(#F1F1F1, #E5E5E5);
font-family: inherit;
margin: 0;
width: 150px;
height: 160px;
border: 1px solid white;
border-radius: 5px;
}
.dropdown-content {
/*display: none;*/
position: absolute;
background-image: linear-gradient(#F1F1F1, #E5E5E5);
border: 1px solid white;
height: auto;
border-radius: 5px;
padding-bottom: 10px;
}
.dropdown-list {
list-style: none;
}
.dropdown-list>li {
display: inline-block;
}
<div class="dropdown">
<button class="dropbtn" data-showdiv="CO">
<div class="titleh2">Title</div>
<img class="orga" src="picture.png">
<div class="titleh1">Name</div>
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<ul class="dropdown-list">
<li>
<a href="#" class="firstImage">
<img class="orga" src="\untitled.png" />
</a>
<div class="titleh2">Title</div>
<div class="titleh3">Name</div>
</li>
<li>
<a href="#">
<img class="orga" src="\untitled.png">
</a>
<div class="titleh2">Title</div>
<div class="titleh3">Name</div>
</li>
<li>
<a href="#">
<img class="orga" src="\untitled.png">
</a>
<div class="titleh2">Title</div>
<div class="titleh3">Name</div>
</li>
</ul>
</div>
</div>
关于html - 将子菜单(下拉)方向从垂直更改为水平,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52179477/