使用浮动时按钮之间的间隙:中心

Posted

技术标签:

【中文标题】使用浮动时按钮之间的间隙:中心【英文标题】:Gaps between buttons when using float: center 【发布时间】:2017-09-27 04:59:56 【问题描述】:

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

float: center;

它们居中,但我的按钮之间有小间隙。这是我的代码的 sn-p:

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;

我确信有一个简单的方法可以解决这个问题,但我就是想不通。

提前致谢!

【问题讨论】:

没有float:center。有text-align:center。您也可能不想使用align=right。您可以使用text-align:rightdisplay:inline-block。如果您制作一个 JSFiddle 也可能会有所帮助。 这也可能有帮助:***.com/questions/4767971/… 【参考方案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

【讨论】:

以上是关于使用浮动时按钮之间的间隙:中心的主要内容,如果未能解决你的问题,请参考以下文章

在 NSTabelView 中禁用标题浮动?

浮动操作按钮的中心 UIButton 文本,如收件箱应用程序

浮动问题(IE6最小高度问题双边距问题以及清理图片间隙)

为浮动操作按钮增加动画

如何设置小吃栏和浮动操作按钮之间的距离?

水平 UIStackView - 如何对齐里面的项目,以便一个向左浮动,另一个在中心?