我设置了特定的宽度,并且我的flex项目上没有margin: auto
,但是由于某些原因,这些属性没有按预期工作。
我只想在headbox和list classes之间添加间距。
现在在我的电脑上,headbox是居中的,但在片段上不是,我不确定为什么,即使justify-content
设置为居中也是如此。
但是即使在我的电脑上,align-items
也没有像应该一样工作。
我的意思是,我知道它没有影响,但那只是如果只有一个项目的情况。
我还注释掉了一些常见的问题,但那并没有起作用。
最后,right
实际上是更大的容器div的一部分,但这应该是无关紧要的。如果您对片段进行全屏显示,您将看到我在说什么。
.right {
display: flex;
position: relative;
flex-flow: row wrap;
align-items: space-between;
justify-content: center;
// text-align: center;
order: 3;
//background: yellow;
flex: 1 50%;
height: 100%;
}
div.list {
display: flex;
flex-flow: row wrap;
width: 70%;
justify-content: center;
line-height: 300%;
border: 1px solid pink;
}
.right .headbox {
border-bottom: 1px solid orange;
width: 70%;
height: auto;
}
.right .list {
// text-align: center;
height: auto;
}
.list ul {
list-style: none;
padding: 0;
}
.list a {
text-decoration: none;
color: inherit;
}
<div class="right">
<div class="headbox">
<h3>Visit Us</h3>
</div>
<div class="list">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">Hours</a>
</li>
<li><a href="#">Plan</a>
</li>
<li><a href="#">Directions</a>
</li>
</ul>
</div>
</div>