简单的CSS样式 - 定位div

Question

这是关于CSS的一个非常简单的问题。我想获得图片中描绘的风格，我尝试了这段代码：

#parent {
    overflow: hidden;
text-align:center;
}
.navbar {
position:absolute;
top:0px;
right:3px;  
}
.logo {
float:left;
}
.table {
float:left;
}

但它对我不起作用，我得到了这个：

Answer 1

尝试：

#parent {
overflow: hidden;
text-align:center;
margin:auto;
width:80%;
}
.navbar {
position:absolute;
top:0px;
right:3px;  
}
.logo {
float:left;
}
.table {
float:left;
}

为了达到您想要的效果，您需要使用margin:auto将父分隔线居中，并使用width:80%放置流畅的宽度。

Answer 2

我给你的父元素一个明确的宽度，然后从那里定位：

#parent {
  width: 960px;
  margin: 0 auto;
  position: relative;
}

.navbar {
  position: absolute;
  top: 0;
  right: 3px;
}

.logo {
  margin-bottom: 20px;
  display: inline-block;
}

.table {
   width: 100%;
 }

我不知道您在页面上有哪些其他内容，但您的.logo元素应该出现在您想要使用默认HTML流的位置。如果表是100％，它将清除。你应该可以在没有花车的情况下拉下它。