Question

我在buttons中有nav，按钮的内容重叠，我无法弄清楚是什么原因造成的。

如何防止按钮内容重叠？

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>

Answer 1

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

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

尝试将行高设置为1。

button{
  line-height: 1;
}

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

https://jsfiddle.net/rifi2k/nh9w80j6/

证明在摆弄...

尽管几乎没有理由在按钮上设置固定的高度或宽度，但是可能需要在按钮上设置固定的宽度或高度，并且当您没有相等的宽度时将行高设置为5px当这两个词最终彼此叠放时，文本高度不会对您有任何帮助，在这种情况下，该按钮的宽度固定。

在我看来，从该示例中学到的教训几乎不是固定宽度或高度，当文本高度为16px时，它不会设置5px的行高...不同意...

重叠，而不是包裹。重叠是线高的问题，环绕是固定宽度的问题

Answer 2

您需要使用“ height”而不是“ margin”定义按钮的高度

您可以在此处查看固定代码： https://codepen.io/parisotdev/pen/qLoPbg

button { 
 display: inline-block;
 text-align: center;
 background-color: white;
 text-decoration: none;
 border: none;
 border-radius: 20px;
 height: 60px; /*this was margin: 30px*/
 margin: 5px;
 float: right;

Answer 3

按钮内容重叠的原因是因为您使用的fixed width中的100px。由于没有足够的空间容纳内容，因此很自然地将其其余部分推到了新的一行。您可以在这里执行的操作是不使用固定宽度，而是让按钮决定自己的宽度。

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; */ /* COMMENTED THIS OUT */
  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 As much text as needed</button>

    </nav>
  </body>
</html>

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

3 个答案: