Question

我正在尝试在我的网页顶部创建一个菜单。我有四个按钮，我试图在webspage的顶部连接在一起，以制作菜单。我正在使用

float: center;

它们居中但我的按钮之间有小的间隙。以下是我的代码片段：

HTML：

<div align="center">
                <a href="index.html">
                    <button align="right" type="button" class="menu1"><span>1. Things you need</span></button>
                </a>
                <a href="setup.html">
                    <button align="right" type="button" class="menu2"><span>2. Setting up your website folders</span></button>
                </a>
                <a href="extrainfo.html">
                <button align="right" type="button" class="menu3"><span>3. Extra Information</span></button>
                </a>
                <a href="layout.html">
                    <button align="right" type="button" class="menu4"><span>4. HTML Layout</span></button>
                </a>
            </div>

CSS：

.menu1 {
    border-radius: 10px 0px 0px 10px;
    padding: 10px 25px;
    background-color: #00FF00;
    text-align: center;
    border: 1px solid #FFFF00;
    width: auto;
    height: auto;
    float: center;
    font-weight: bold;
    font-family: "Arial Black", Gadget, sans-serif;
}

.menu2 {
    padding: 10px 25px;
    background-color: #00FF00;
    text-align: center;
    border: 1px solid #FFFF00;
    width: auto;
    height: auto;
    float: center;
    font-weight: bold;
    font-family: "Arial Black", Gadget, sans-serif;
}

.menu3 {
    padding: 10px 25px;
    background-color: #00FF00;
    text-align: center;
    border: 1px solid #FFFF00;
    width: auto;
    height: auto;
    float: center;
    font-weight: bold;
    font-family: "Arial Black", Gadget, sans-serif;
}

.menu4 {
    border-radius: 0px 10px 10px 0px;
    background-color: #00FF00;
    padding: 10px 25px;
    text-align: center;
    border: 1px solid #FFFF00;
    width: auto;
    height: auto;
    float: center;
    font-weight: bold;
    font-family: "Arial Black", Gadget, sans-serif;
}

我确信这有一个简单的方法，但我无法理解它。

提前致谢！

Answer 1

您所指的空白区域是WhiteSpace-Only text nodes。

按钮之间存在，您可以启动开发人员控制台并查找它。我使用内置的firefox开发人员工具跟踪它们。我主要使用萤火虫，但萤火虫，令人惊讶的是没有显示它们。

根据developer.mozilla的说法，

DOM中存在空白可能会以不可预见的方式操纵内容树。在Mozilla中，原始文档的文本内容中的所有空格都在DOM中表示（这不包括标记内的空格）。（这在内部是必需的，以便编辑器可以保留文档的格式，以便CSS中的white-space：pre可以工作。）这意味着：

会有一些文本节点只包含空格，和   一些文本节点在开头或结尾都有空格。

现在，这是一个函数clean，它将清理只有空白文本的节点，

function clean(node)
{
  for(var n = 0; n < node.childNodes.length; n ++)
  {
    var child = node.childNodes[n];
    if
    (
      child.nodeType === 8 
      || 
      (child.nodeType === 3 && !/\S/.test(child.nodeValue))
    )
    {
      node.removeChild(child);
      n --;
    }
    else if(child.nodeType === 1)
    {
      clean(child);
    }
  }
}

将此功能添加到您的JS文件中，将此功能称为

clean(document);

从整个文档中删除文本节点或专门在元素上运行它，例如

clean(document.body);

这会清除所有不需要的whitespace only text nodes

的文档

来源：SitePoint

使用float：center时按钮之间的间隙

1 个答案: