我试图用水平列表制作标题。在我的笔记本电脑屏幕上,它可以按照我想要的方式工作,但是当我调整浏览器的大小时,列表会从标题div中获取。有谁可以帮助我吗?
图片1 - 全尺寸窗口: image
图片2 - 当我调整大小时: red arrow points were i want it to be
我的代码: 的 HTML
<div class="divcabecalho">
<img src="Imagens/Symbol_of_Incheon.svg.png">
<ul class="listacabecalho">
<li>aaaaa</li>
<li>aaaaa</li>
<li>aaaaa</li>
<li>aaaaa</li>
<li>aaaaa</li>
<li>aaaaa</li>
<li>aaaaa</li>
<li>aaaaa</li>
<li>aaaaa</li>
</ul>
CSS
html {
min-width: 100%;
width: 100%;
max-width: 100%;
min-height: 100vh;
height: 100vh;
max-height: 100vh;
margin: 0;
padding:0px;
background: #fafafa;
font-family: Trebuchet MS;
}
body {
width: 100%;
margin: 0;
}
.divcabecalho {
min-width: 100%;
width: 100%;
max-width: 100%;
height: 100px;
margin: 0;
text-align: left;
background-color: dodgerblue;
-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}
.listacabecalho {
list-style-type: none;
width: 100%;
max-width: 100%;
min-width: 100%;
margin: 0;
color: white;
height: 100px;
line-height: 100px;
}
.listacabecalho li {
float: left;
padding-left: 10px;
padding-right: 10px;
margin: 0;
height: 100px;
}
.listacabecalho img {
width: auto;
height: 100px;
}
.principalcabecalho {
background-color: white;
color: black;
border-bottom-right-radius: 50px;
margin: 0;
}
img {
display: inline;
height: 100px;
float: left;
background-color: white;
color: black;
padding-left: 5px;
padding-right: 5px;
border-bottom-right-radius: 50px;
margin: 0;
}
答案 0 :(得分:0)
看看这是否会让你失望:https://codepen.io/panchroma/pen/ybvqpw
我删除了ul和li选择器的高度声明
祝你好运!.listacabecalho {
list-style-type: none;
width: 100%;
max-width: 100%;
/* min-width: 100%; */
margin: 0;
color: white;
/* height: 100px; */
/* line-height: 100px; */
padding-top: 30px;
}
.listacabecalho li {
float: left;
padding-left: 10px;
padding-right: 10px;
margin: 0;
/* height: 100px; */
}
答案 1 :(得分:0)
看起来你在列表项上设置的行高会导致它堆叠不正确。通过删除行高并在列表项中添加一些填充,您可以实现您想要的外观。
.listacabecalho {
list-style-type: none;
width: 100%;
max-width: 100%;
min-width: 100%;
margin: 0;
color: white;
height: 100px;
padding: 2em 0;
}
查看此jsfiddle。