BASE HTML / CSS - JSFiddle :https://jsfiddle.net/tae8pc1g/2/
所有的标题都是真的。 JSFiddle中的所有重要代码如下:
<div class="example-button">Menu Button
<ul class="example-menu">
<li>This is</li>
<li>some example</li>
<li>dynamic</li>
<li>content</li>
</ul>
</div>
CSS
.example-button {
position: relative;
display: inline-block;
}
.example-menu {
position: absolute;
display: inline-block;
top: 100%;
}
使用HTML&amp;仅限CSS,是否可以将.example-menu
相对于.example-button
的宽度居中,即使它比.example-button
宽?
答案 0 :(得分:7)
是的,可以使用:
1 - 对于未知宽度:
left: 50%;
transform: translateX(-50%);
2 - 对于已知宽度:
left: 50%;
margin-left: -(width/2)
这是一个与
一起工作的JSFiddle
body {
text-align: center;
}
.example-button {
position: relative;
padding: 15px;
border-radius: 5px;
background: gray;
display: inline-block;
text-align: left;
}
.example-menu {
position: absolute;
display: inline-block;
top: 100%;
background: blue;
margin:0;
padding: 10px 70px;
list-style: none;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
<div class="example-button">Menu Button
<ul class="example-menu">
<li>Please</li>
<li>center</li>
<li>me!</li>
</ul>
</div>
答案 1 :(得分:1)
它可能被认为是一个黑客,但使用纯CSS你可以把它放在你的示例按钮类:
left: 50%;
transform: translateX(-50%);
请参阅https://jsfiddle.net/08fqfhum/
注意:这不适用于旧浏览器(IE8),因为它使用CSS转换。对于像Safari这样的浏览器,您还需要添加转换属性的前缀版本:
-webkit-transform: translateX(-50%);