时间戳

首页 > 解决方案 > 按钮中的 HTML 文本不起作用/重叠

html - 按钮中的 HTML 文本不起作用/重叠

问题描述

我在buttons里面 anav并且按钮的内容是重叠的，我无法弄清楚是什么原因造成的。

如何防止按钮内容重叠？

body,html
{
  padding: 0;
  margin: 0;
}

nav
{
    background-color: #e05138;
    height: 82px;
    width: 100%
}
button
{

  display: inline-block;

  text-align: center;

  background-color: white;

  text-decoration: none;

  border: none;
  border-radius: 20px;

  padding: 30px;
  margin: 5px;

  float: right;

  width: 100px;

  line-height: 5px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>My web Page</title>
 
    <link rel="stylesheet" type="text/css" href="style.css">
 
  </head>
  <body>
    <nav>
 
      <button type="button" name="Contact">Contact</button>
      <button type="button" name="About Me">About Me</button>
 
    </nav>
  </body>
</html>

标签： htmlcss

解决方案

您要确保保持行高 >= 文本大小。

您的行高为 5px，文本大小将使用浏览器默认值，即 ~14-16px。

尝试将行高设置为 1。

button{
  line-height: 1;
}

向我解释为什么....如果行高不是问题，只需将行高更改为 1 正是我所说的解决了文本相互重叠的问题，这是逐字逐句的问题。

https://jsfiddle.net/rfi2k/nh9w80j6/

证据在小提琴中......

虽然没有理由在按钮上设置固定的高度或宽度，但可能需要在按钮上具有固定的宽度或高度，并且当您没有相等的文本高度时，将行高设置为 5px 是当这两个词最终堆叠在一起时，不会对您有任何帮助，这是该按钮上固定宽度的情况。

所以在我看来，从这个例子中学到的教训不是不固定宽度或高度，当你的文本高度为 16px 时，它不要设置 5px 行高......任何其他人都不同意.. .

重叠，而不是包裹。重叠是行高问题，换行是固定宽度问题

推荐阅读