如何减少100%宽度div内两个元素之间的差距?

时间:2013-02-21 22:11:50

标签: css layout width html

我在我的网站标题上工作,左侧角有一个徽标图像(100px x 100px),导航栏使用css表属性在中央垂直对齐。徽标图像和导航栏UL元素都在#header div中,宽度为100%。

在不破坏布局的情况下,缩小徽标与导航元素之间差距的最佳方法是什么?

website 100% width header with two elements

添加了边框,因此可以轻松区分元素。我也在使用Twitter Bootstrap框架。

我的页面的HTML可以在这里找到:http://pastebin.com/RpgcPDdh

这是我的CSS:

#wrapper {
    background: none repeat scroll 0 0 #FFFFFF;
    border-bottom: medium none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
    margin: 0 auto;
    padding: 0 50px;
}

body {
    background: url("images/maze_bg.png") repeat scroll 0 0 #DDDDDD 
}

#header {
    display: table;
    padding: 20px 0;
    width: 100%;
}

#header ul{
    border: solid 1px red;
    display: table-cell;
    vertical-align: middle;
}

#header img{
    border: solid 1px blue;
}

感谢任何帮助。

2 个答案:

答案 0 :(得分:1)

投入

margin-right: 20px;

#header ul上的某些内容。那将把它移开。

答案 1 :(得分:0)

padding-right做了伎俩!我想我应该坚持下去而不是在这里提出问题。