Question

我正在尝试在屏幕底部为我正在制作的网站实施类似Facebook的工具栏。

目前，我有100％的屏幕宽度，但我希望它看起来几乎完全像Facebook的工具栏，居中，底部对齐在顶部，大约是当前屏幕宽度的80％。

以下是我所拥有的工具栏的当前CSS，它是屏幕宽度的100％。

提前致谢。

CSS：

<style type="text/css">
#toolbar
{
background:url('/_assets/img/toolbar.gif') repeat-x;
height:25px;
position:fixed;
bottom:0px;
width:100%;
left:0px;
border-left:1px solid #000000;
border-right:1px solid #000000;
z-index:100;
font-size:0.8em;
}   
</style>

Answer 1

使用：

left:10%;
right:10%;

Answer 2

width: 80%;
left: 10%;
right: 10%;

怎么样？

Answer 3

的CSS：

#container {
    width: 100%;
}
#toolbar {
    width: 80%;
    height: 40px;
    margin-right: auto;
    margin-left: auto;
}

HTML：

<div id="container">
  <div id="toolbar"></div>
</div>

底部浮动工具栏，居中，当前屏幕宽度的80％

3 个答案: