html - 如何在保持文本对齐的同时删除两个元素之间的空白？

Question

我有一个位于屏幕中央的菜单栏。在左边我有一个元素，右边也有一个。这些具有将菜单栏与图形布局的其余部分联系起来的背景图像。

问题是标签之间有空格。这是 CSS:

#menu_items {
display: inline-block;
position: relative;
margin: 0;
padding: 6px;
top: -9px;
height: 15px;
background-color: #75784D;
}

#swoop_left {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
background-image: url('../imgs/menu_l.gif');
background-repeat: no-repeat;
width: 140px;
height: 21px;
font-size: 0px;
border: solid red 1px;
}

#swoop_right {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
background-image: url('../imgs/menu_r.gif');
background-repeat: no-repeat;
width: 140px;
height: 21px;
border: solid red 1px;
}

图像本身为 140 像素 x 21 像素(宽 x 高)。

我无法 float 它们，因为菜单不会居中。我不会用

font-size: 0px;

在父容器上，因为它不会显示菜单项，并将菜单项设置为

font-size: 1em;

之后没有解决问题。

谁有可以在所有浏览器中运行且不依赖 JS 的解决方案？

注意:两个元素的边框仅用于布局目的，不会出现在最终代码中。

Answer 1

菜单中的元素究竟是如何生成的？在包含菜单的 div 中，您使用的是无序列表吗？

如果您是，那么一个可能的解决方案是使用 css 将左右图像添加到列表的 :first-child 和 :last-child 元素。您将不再需要两个额外的 div 元素，因此可以只专注于单个菜单容器。