我有一个菜单,当我尝试调整浏览器窗口的大小时,一切都变得一团糟——元素改变了它们各自的位置。但是,我希望他们在同一条线上。这是片段:
.mainMenu {
width: 100%;
position: absolute;
top: 90px;
z-index: 100
}
.mainMenu .tripleDot {
float: left;
width: 90px;
font-family: Georgia, serif;
font-size: 40px;
font-style: italic;
font-weight: bold;
margin: 5px;
line-height: 40px;
text-align: center;
}
.mainMenu .tripleDot::after {
position: relative;
content: "";
display: inline-block;
width: 0.3em;
height: 0.3em;
border-right: 0.15em solid black;
border-top: 0.15em solid black;
transform: rotate(45deg);
top: 5.3px;
}
.mainMenu .step {
float: left;
min-width: 100px;
max-width: 200px;
width: 25%;
}
.mainMenu .step-text {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
font-weight: bold;
text-align: center;
}
.mainMenu .step-number {
font-family: Georgia, serif;
font-size: 40px;
font-style: italic;
font-weight: bold;
border-radius: 50%;
width: 70px;
height: 70px;
line-height: 60px;
text-align: center;
margin: auto;
}
<ul class="mainMenu">
<li class="step" id="step1">
<a href="#">
<div class="step-number">A</div>
<div class="step-text">Select</div>
</a>
</li>
<li class="tripleDot xs-hidden">.....</li>
<li class="step" id="step2">
<a href="#">
<div class="step-number">B</div>
<div class="step-text">Select</div>
</a>
</li>
<li class="tripleDot xs-hidden">.....</li>
<li class="step">
<a href="#">
<div class="step-number">C</div>
<div class="step-text">Upload</div>
</a>
</li>
</ul>
xs-hidden
类来自 gridlex,用于隐藏移动 View 中的 div。
我尝试调整定位,但没有任何改变。有什么建议可以解决吗?
最佳答案
您可以将 display: flex
应用于 .mainMenu
。查看代码段:
.mainMenu {
width: 100%;
position: absolute;
top: 90px;
z-index: 100;
display: flex
}
.mainMenu .tripleDot {
float: left;
width: 90px;
font-family: Georgia, serif;
font-size: 40px;
font-style: italic;
font-weight: bold;
margin: 5px;
line-height: 40px;
text-align: center;
}
.mainMenu .tripleDot::after {
position: relative;
content: "";
display: inline-block;
width: 0.3em;
height: 0.3em;
border-right: 0.15em solid black;
border-top: 0.15em solid black;
transform: rotate(45deg);
top: 5.3px;
}
.mainMenu .step {
float: left;
min-width: 100px;
max-width: 200px;
width: 25%;
}
.mainMenu .step-text {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
font-weight: bold;
text-align: center;
}
.mainMenu .step-number {
font-family: Georgia, serif;
font-size: 40px;
font-style: italic;
font-weight: bold;
border-radius: 50%;
width: 70px;
height: 70px;
line-height: 60px;
text-align: center;
margin: auto;
}
<ul class="mainMenu">
<li class="step" id="step1">
<a href="#">
<div class="step-number">A</div>
<div class="step-text">Select</div>
</a>
</li>
<li class="tripleDot xs-hidden">.....</li>
<li class="step" id="step2">
<a href="#">
<div class="step-number">B</div>
<div class="step-text">Select</div>
</a>
</li>
<li class="tripleDot xs-hidden">.....</li>
<li class="step">
<a href="#">
<div class="step-number">C</div>
<div class="step-text">Upload</div>
</a>
</li>
</ul>
关于html - 保持列表元素相同 "row",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49410774/