Html 以透明菜单为中心
我试图让我的透明菜单以为中心，但无论我从互联网上找到什么方法，似乎都没用 如果有人能看完这段代码，帮我一把，我会非常高兴的。：） HTML部分：Html 以透明菜单为中心,html,css,center,Html,Css,Center,我试图让我的透明菜单以为中心，但无论我从互联网上找到什么方法，似乎都没用 如果有人能看完这段代码，帮我一把，我会非常高兴的。：） HTML部分： <div id="container"> <div id="menu"> <span class="bg"></span> <ul> <li><a href="print">PRINT</a></li>
<div id="container">
<div id="menu">
<span class="bg"></span>
<ul>
<li><a href="print">PRINT</a></li>
<li><a href="tv">TV</a></li>
<li><a href="other">OTHER</a></li>
<li><a href="resume">RESUME</a></li>
</ul>
</div>
对中浮动是困难的。这里有一个方法：
<style type="text/css">
#container
{
font-family:arial;
height:400px;
border: red;
position: relative;
}
#menu
{
position:relative;
left:-50%;
float:right;
}
ul
{
position:relative;
left:50%;
background: rgba(0, 0, 0, 0.5);
overflow: hidden;
}
li{
display:block;
float:left;
padding: 8px 13px;
}
a {text-decoration:none;}
</style>
<div id="container">
<div id="menu">
<ul>
<li><a href="print">PRINT</a></li>
<li><a href="tv">TV</a></li>
<li><a href="other">OTHER</a></li>
<li><a href="resume">RESUME</a></li>
</ul>
</div>
</div>
#容器
{
字体系列：arial；
高度：400px；
边框：红色；
位置：相对位置；
}
#菜单
{
位置：相对位置；
左-50%；
浮动：对；
}
保险商实验室
{
位置：相对位置；
左：50%；
背景：rgba（0,0,0,0.5）；
溢出：隐藏；
}
李{
显示：块；
浮动：左；
填充：8px 13px；
}
a{文本装饰：无；}
小提琴：您可以通过将
#菜单更新为：
#menu {
position: absolute;
border:2px solid #000;
border-top:0;
border-radius:0 0 10px 10px;
left: 50%;
margin-left: -152px;
width: 305px;
}
菜单未居中的原因是您没有为菜单或容器定义宽度。如果已定义宽度，则可以使用：
margin: 0 auto;
我还不知道为什么你的浮动开始弄乱你的背景颜色，但是我注意到你在你的一个样式属性的末尾漏掉了一个分号
#container
{
padding: 10px 0 0 0
...
}
应该是
#container
{
padding: 10px 0 0 0;
...
}
另一种选择：
编辑的CSS：
#container
{
display: inline-block;
*display: inline;
zoom: 1;
padding: 10px 0 0 0
overflow:hidden;
font-family:arial;
height:400px;
}
#menu
{
float: left; // **WHENEVER I CHANGE THIS FLOAT, THE MENU-BACKGROUND DISAPPEARS?!**
position: relative;
display:inline;
}
#menu .bg
{
position:absolute;
width:100%;
height:100%;
background:#000;
opacity:0.5;
filter:alpha(opacity=50);
left:0;
top:0;
}
#menu ul { <===Added this definition and moved the border here as well
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
border:2px solid #000;
border-top:0;
border-radius:0 0 10px 10px;
}
#menu li
{
float:left;
}
#menu a
{
text-decoration:none;
position:relative;
padding:8px 13px;
color:white;
font-weight:bold;
z-index:2;
float:left;
}
#menu a:hover
{
color:#999;
}
#容器
{
显示：内联块；
*显示：内联；
缩放：1；
填充：10px 0
溢出：隐藏；
字体系列：arial；
高度：400px；
}
#菜单
{
浮动：左；//**每当我更改此浮动时，菜单背景将消失**
位置：相对位置；
显示：内联；
}
#菜单
{
位置：绝对位置；
宽度：100%；
身高：100%；
背景：#000；
不透明度：0.5；
过滤器：α（不透明度=50）；
左：0；
排名：0；
}
#菜单ul{请考虑一个不太冗长的标题——简短的描述这个问题是最好的。这对我来说是非常好的，非常感谢！我只需要改变宽度到一个稍微高的值！=）谢谢你的DaGuyNo问题。不要忘记，左边的负边距是宽度的一半，所以如果你改变了宽度，你就不得不去形容。我试过了，但没有成功，我确实在你下面的菜单中找到了一个解决方案，但非常感谢山姆·哈克比！：；还有！^。^这让我的菜单消失了，我很担心，但感谢你尝试@Cooperstai修改它以匹配你的代码。这有点不同，但它是正确的应该很容易定制。这是提琴：非常感谢，我通过daGuy的回复找到了居中的东西。但是你编辑的HTML部分很棒，非常感谢！=）晚上好，先生！
#container
{
display: inline-block;
*display: inline;
zoom: 1;
padding: 10px 0 0 0
overflow:hidden;
font-family:arial;
height:400px;
}
#menu
{
float: left; // **WHENEVER I CHANGE THIS FLOAT, THE MENU-BACKGROUND DISAPPEARS?!**
position: relative;
display:inline;
}
#menu .bg
{
position:absolute;
width:100%;
height:100%;
background:#000;
opacity:0.5;
filter:alpha(opacity=50);
left:0;
top:0;
}
#menu ul { <===Added this definition and moved the border here as well
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
border:2px solid #000;
border-top:0;
border-radius:0 0 10px 10px;
}
#menu li
{
float:left;
}
#menu a
{
text-decoration:none;
position:relative;
padding:8px 13px;
color:white;
font-weight:bold;
z-index:2;
float:left;
}
#menu a:hover
{
color:#999;
}
<div id="container">
<div id="menu">
<span class="bg"></span>
<ul>
<li><a href="print">PRINT</a></li>
<li><a href="tv">TV</a></li>
<li><a href="other">OTHER</a></li>
<li><a href="resume">RESUME</a></li>
</ul>
</div>
</div>