Question

我最近为我的用户面板设置了一个侧边栏，但它似乎被推下了。我看过其他问题线程，他们的解决方案都没有给我带来好运。希望有人可以帮助我解决这个问题

CSS：

<style>


       div.menu 
{ 
width:200px; 
height:660px; 
background-color:#C0C0C0; 
left:0px; 
top:0px; 
} 

.menu ul li 
{ 
margin-bottom:20px; 
} 
body    {width: 800px; margin: 20px auto; /* center */ padding: 20px;
         border: 1px solid black;}

</style>

HTML：

<body>
<center><h3>User Panel</h3></center>
<div class="menu">
    <ul>
        <li><a href="#">Link1</a></li>
    </ul>
</div>
</body>

我会发布您要求的所有内容以帮助解决这个问题 - 希望它详细而且尽可能充分地帮助您解决问题

整个代码：

<style>


       div.menu 
{ 
width:200px; 
height:660px; 
background-color:#C0C0C0; 
left:0px; 
top:0px; 
} 

.menu ul li 
{ 
margin-bottom:20px; 
} 
body    {width: 800px; margin: 20px auto; /* center */ padding: 20px;
         border: 1px solid black;}

</style>
<body>
<center><h3>User Panel</h3></center>
<div class="menu">
    <ul>
        <li><a href="#">Link1</a></li>
    </ul>
</div>
</body>

Answer 1

问题是由于标题在技术上位于侧边栏之上。删除<center>，您将看到我的意思。让我们创建一个解决方案而不使用<center> is deprecated and should no longer be used。

以下是使用display: table的解决方案：

Have a jsBin Example!

HTML

<div class="menu">
    <ul>
        <li><a href="#">Link1</a></li>
    </ul>
</div>

<div class="content">
        <h3>User Panel</h3>
</div>

CSS

* {
  margin:0;
  padding:0
}

body {
  width:800px;
  margin:20px auto;
/* center */
  padding:20px;
  border:1px solid #000;
  display:table
}

body > div {
  display:table-cell
}

div.menu {
  width:200px;
  height:660px;
  background-color:silver;
  padding:10px
}

.menu ul li {
  margin-bottom:20px;
  list-style:none
}

h3 {
  text-align:center
}

Answer 2

标题是h3元素，它是块级元素。它默认会自动占用一些余量。从h3删除保证金以解决问题。

center h3 {
    margin: 0;
}

注意：默认情况下ul标记也会占用一些边距。

Answer 3

如果不知道您想象的布局和内容，很难说出您想要达到的目标。

但是您使用菜单样式的左侧和顶部属性，并且在没有将位置指定为绝对位置，固定位置或相对位置的情况下不会执行任何操作。

尝试这样做：

div.menu 
{
  position:absolute; 
  width:200px; 
  height:660px; 
  background-color:#C0C0C0; 
  left:0px; 
  top:0px; 
}

侧边栏将不再被按下。但它也将从布局流程中取出。因此，在您的示例中，h3（以及页面上的所有其他内容）现在将扩展到侧边栏下方。那可能不是你想要的。

如果要构建多列布局，则应考虑使用CSS框架，例如Twitter Bootstrap（http://getbootstrap.com/）。

Answer 4

您设置了顶部和左侧属性，但没有位置。你需要添加

position: absolute;

到你的菜单css，让它保持在顶部。它将与你所拥有的h3重叠，但你可以使用z-index和margin来解决这个问题。

我希望这有帮助，如果您需要任何进一步的解释，请告诉我。：）

Answer 5

你可以做这样的事情，只需更改html中的顺序，所以'中心'位于侧边栏之后：

   div.menu {
    width:200px;  
    background-color:#C0C0C0;  
    float:left;  
   }  
   center {
    float:left;
    display:inline;
    width:400px;
    text-align:center;
   }

此外，您可以将其设为span或div中的类，而不是使用已弃用的中心标记。

CSS / HTML边栏被标题文本向下推

5 个答案: