使用浮动时按钮之间的间隙:中心
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:right
和display: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
【讨论】:
以上是关于使用浮动时按钮之间的间隙:中心的主要内容,如果未能解决你的问题,请参考以下文章