我在发布之前做了一个研究,但我找不到任何解决问题的方法。
我正在我的网站上制作菜单,它的宽度为100%,在菜单中,我放了3个不同的div。
管理以使其占据宽度的100%
.clear {
clear: both;
}
.menu {
position: relative;
height: 20%;
text-align: center;
}
.menu:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
background-image: url("images/triangles.svg");
width: 100%;
height: 100%;
opacity: 0.1;
z-index: -1;
}
.menu li {
float: left;
list-style: none;
margin-right: 5%;
}
.left,
.center,
.right {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: blue;
}
.left,
.right {
width: 30%;
}
.left {
left: 5%;
margin-right: 5%;
}
.right {
right: 5%;
}
.center {
width: 20%;
left: 40%;
}
<div class="menu">
<!--START-->
<div class="left">
<ul>
<li><a href="#01">Element 1</a>
</li>
<li><a href="#02">Element 2</a>
</li>
<li><a href="#03">Element 3</a>
</li>
</ul>
</div>
<div class="center">
<h1>Title</h1>
<h3>Another Title</h3>
</div>
<div class="right">
<ul>
<li><a href="#04">Element 4</a>
</li>
<li><a href="#05">Element 5</a>
</li>
<li><a href="#06">Element 6</a>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--END-->
我的菜单有一个svg背景,但我认为这不会导致我的问题。问题是在.left和.right中,text-align不起作用,但它适用于.center div。 一开始我的三个div处于浮动状态,但正如我认为的那样是问题,我尝试定位是绝对位置,但风格不起作用。
我应用背景颜色来显示我的div的宽度,文本根本不是中心,显然“text-align:right”也不起作用,我不明白,因为.center和.left /.right基本相同,我无法弄清楚.center和其他div之间有什么区别。
我的代码出了什么问题?
答案 0 :(得分:0)
由于以下样式
.menu li{float: left; list-style: none; margin-right: 5%;}
您无法在其中查看text-align
对您引用的文本有任何影响的空间。这是因为当您float
li
时,他们只能缩小内容所需的空间。
既然如此,很可能是因为您padding
中的margin
和ul
认为text-align
是答案。请参阅以下代码
.right ul {margin: 0;padding:0;}
它的影响:
.clear {
clear: both;
}
.menu {
position: relative;
height: 20%;
text-align: center;
}
.menu:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
background-image: url("images/triangles.svg");
width: 100%;
height: 100%;
opacity: 0.1;
z-index: -1;
}
.menu li {
float: left;
list-style: none;
margin-right: 5%;
}
.left,
.center,
.right {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: blue;
}
.left,
.right {
width: 30%;
text-align: left;
}
.left {
left: 5%;
margin-right: 5%;
}
.right {
right: 5%;
}
.center {
width: 20%;
left: 40%;
}
a {
color: white;
}
.right ul {
margin: 0;
padding: 0;
}
&#13;
<div class="menu">
<!--START-->
<div class="left">
<ul>
<li><a href="#01">Element 1</a>
</li>
<li><a href="#02">Element 2</a>
</li>
<li><a href="#03">Element 3</a>
</li>
</ul>
</div>
<div class="center">
<h1>Title</h1>
<h3>Another Title</h3>
</div>
<div class="right">
<ul>
<li><a href="#04">Element 4</a>
</li>
<li><a href="#05">Element 5</a>
</li>
<li><a href="#06">Element 6</a>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--END-->
&#13;
根据你想要实现的确切布局,有很多关于如何利用CSS给你的力量的选项,但希望这足以让你走向你希望的地方。得到。