【问题标题】:How to reduce gap between two elements within a 100% width div?如何减少 100% 宽度 div 内两个元素之间的间隙?
【发布时间】:2013-02-22 06:29:01
【问题描述】:

我正在处理我的网站标题,该标题在左上角有一个徽标图像(100 像素 x 100 像素)和一个使用 css 表格属性垂直居中对齐的导航栏。徽标图像和导航栏 UL 元素都位于宽度为 100% 的 #header div 中。

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

添加了边框,以便轻松区分元素。我也在使用 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;
}

感谢任何帮助。

【问题讨论】:

  • 您要移动其中一个还是两个?还是做大一点?空格必须与某些东西交易......
  • 我想将导航移近徽标。

标签: css layout width html


【解决方案1】:

扔一个

margin-right: 20px;

#header ul 上的内容。这会将它向左移动。

【讨论】:

  • 我不久前在 Firebug 中尝试过这个,但没有任何区别。我又试了一次,这次编辑了我的 CSS 文件,但仍然没有区别。我在 FF 18.0.2。
  • @Sid Ugh,这可能是因为您将这些内容显示为表格单元格。您是否尝试将图像标签的宽度设置为实际宽度?
  • 不,但我只是在#header ul 上尝试了 padding-right 并且成功了!
【解决方案2】:

padding-right 成功了!我想我应该坚持而不是在这里提出问题。

【讨论】: