Question

我是使用div标签的新手，我一直在努力解决这个问题。我搜索了几个小时，似乎无法找到一个有效的解决方案。

我目前正在一个div元素中创建一个水平菜单。我不能使用嵌套在一个中的多个div元素，因为这会在我调整浏览器大小时导致元素换行。我不能使用float：left因为当我调整浏览器大小时，这也会导致元素换行。

我已经测试了上面和其他多个代码段，但我无法删除菜单中链接之间的空格。这是我的代码。

<div style=" display:inline-block; width:100%; padding: 0.1em 0.6em; border-collapse:collapse; max-height:100px; margin-top:-1px; margin-left:30%; overflow-y:hidden;">

<img src="logo.png" />
<img src="cornerthing4.png" /><a href="index.php"><img src="homebtn.png"></a><a href="index.php"><img src="faqbtn.png"></a><img src="cornerthing3.png">



</div>

我正在使用样式标记，因为我正在尝试设计页面，我将在完成后将css代码移动到css文件。

删除<a href>标记时，图像并排放置在我想要的位置。一旦我将标签放在它们之间，它们之间就会获得20个像素的空间。

对于为什么会发生这种情况以及如何纠正它的任何见解都会很棒。

编辑：代码在jfiddle中工作，但是，它在我的网站上不起作用。以下是该网站的链接：http://matxor.net/header.php

Answer 1

您的 a 样式有余量。您在此处粘贴的标记中不存在此边距。那是你想要摆脱的吗？

a:link {
  margin-left: 30px;
  color: #0A58A5;
  text-decoration: none;
  font-weight: bold;
}

Answer 2

将margin-left:30px规则关闭<a>标记，它会显示您的需求。

Answer 3

我目前正在一个div元素中创建一个水平菜单。我不能使用嵌套在一个中的多个div元素，因为这会在我调整浏览器大小时导致元素换行。我不能使用float：left因为当我调整浏览器大小时，这也会导致元素换行。

当然可以！

http://jsfiddle.net/charlescarver/fY48A/

在此示例中，元素不会自行换行，容器div仍然是宽度的100%。

div元素中链接之间的空格

3 个答案: