css 为什么我的5个HTML按钮在设置为20%最大宽度时不能显示在一行中？

rqdpfwrv  于 2023-05-30  发布在  其他
关注(0)|答案(4)|浏览(133)

我的5个HTML按钮被设置为20%的最大宽度，应该都适合在1行，但它显示在2行。为什么？
我有两个初学者的问题。
我是Javascript/CSS/HTML的新手，并学习了一些Python编码的基础知识。
我为主代码创建了“index.html”，并将“style.css”文件和“main.js”文件作为空占位符，以备将来使用。我还为我正在制作的应用程序的5个主要页面制作了“page1.html”，“page2.html”，“page3.html”，“page4.html”，“page5.html”。我在主“index.html”页面上做了5个按钮，根据用户点击的按钮，将用户带到5个不同的页面。

问题1：

下面是我的“index.html”代码，大部分工作。但是为什么5个按钮没有全部显示在屏幕底部的一行中呢？它们的宽度都应该设置为屏幕最大宽度的20%，所以所有5个都应该适合完美。相反，第5个按钮被撞到第2行。如果我将它们的宽度更改为最大宽度的19%，它们都适合，但它应该在最大宽度的20%下工作，那么为什么当5个按钮设置为最大宽度的20%时，它们并不适合？
这里列出了来自“index.html”的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
.bottom-buttons {
  position: fixed;
  bottom: 0;
  width: 100%;
}
.bottom-buttons button {
  width: 20%;
  height: 5%;
}
</style>

</head>
<body>
    <div class="bottom-buttons">
        <a href="page1.html"><button>Button 1</button></a>
        <a href="page2.html"><button>Button 2</button></a>
        <a href="page3.html"><button>Button 3</button></a>
        <a href="page4.html"><button>Button 4</button></a>
        <a href="page5.html"><button>Button 5</button></a>
      </div>

</body>
</html>

问题2：

如果我剪切和之间的所有代码行，并将其粘贴到“style.css”中，则会导致按钮布局被撤销。我想你可以选择把CSS代码放在自己的“style.css”文件中，或者，在主HTML文件和之间？
如果符合某些标准，这是真的吗？我需要做些什么来使它在CSS代码交换到CSS文件中的情况下工作？试着去感受正确和错误的做事方式。
谢谢。

css

4条答案

按热度按时间
kkbh8khc

kkbh8khc1#

按钮换行到第二行的原因是，当您设置宽度时，宽度属性不包括填充、边距或边框。一个简单的解决方法是将按钮的宽度设置为1fr（剩余空间的一小部分）：

.bottom-buttons button {
  width: 1fr;
  height: 5%;
}

这将考虑到我上面提到的属性，同时允许您动态添加和删除按钮，而不会破坏布局。另一种方法是使用网格布局和flexbox，后者是我首选的方法。
至于你的第二个问题，我的信息有限，但为了使第二个css文档上的样式生效，你必须在头部链接它们。你可以通过把这段代码放到你的主html文档的头部来做到这一点。

<link rel="stylesheet" href="./style.css">

如果你不这样做，那么HTML代码甚至不知道你的自定义css样式的存在，因此不会影响更改。

赞(0）分享  回复(0）举报  2023-05-30
slmsl1lt

slmsl1lt2#

默认情况下，像<button>这样的输入元素有自己的浏览器样式，与您设置的样式重叠（默认情况下，buttons通常有border和padding）
查看https://css-tricks.com/overriding-default-button-styles/
你可以尝试在<a>元素上设置宽度

.bottom-buttons a {
  width: 20%;
  height: 5%;
}

对于第二季度，您完全可以将样式分解到它们自己的文件中
将<style>标记中的内容添加到styles.css文件中，并在html中使用<link rel="stylesheet" href="style.css">引用该文件

赞(0）分享  回复(0）举报  2023-05-30
2hh7jdfx

2hh7jdfx3#

问题一

浏览器默认行为

默认情况下，浏览器总是在一些元素之间添加空格，包括按钮，因为回车，新行或白色。当我们的代码编辑器的格式化程序格式化代码以增加可读性时，不要担心会发生这种情况。在您的例子中，在每个<a></a>标记之间添加了换行符。不格式化代码的演示效果很好：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .bottom-buttons {
                position: fixed;
                bottom: 0;
                width: 100%;
                /* font-size: 0px; */
            }

            .bottom-buttons button {
                /* font-size: 14px; */
                width: 20%;
                height: 5%;
            }
        </style>
    </head>

    <body>
        <div class="bottom-buttons"><a href="page1.html"><button>Button 1</button></a><a href="page2.html"><button>Button 2</button></a><a href="page3.html"><button>Button 3</button></a><a href="page4.html"><button>Button 4</button></a><a href="page5.html"><button>Button 5</button></a>
        </div>
    </body>
</html>

格式化代码怎么办

别担心，我们有解决方案，你只需要设置父元素的字体大小为零，然后指定按钮和繁荣的字体大小。就像这样：

.bottom-buttons {
    position: fixed;
    bottom: 0;
    width: 100%;
    font-size: 0px;
}

.bottom-buttons button {
    font-size: 14px;
    width: 20%;
    height: 5%;
}

在这样做之后看看：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .bottom-buttons {
      position: fixed;
      bottom: 0;
      width: 100%;
      font-size: 0px;
    }
    
    .bottom-buttons button {
      font-size: 14px;
      width: 20%;
      height: 5%;
    }
  </style>
</head>

<body>
  <div class="bottom-buttons">
    <a href="page1.html"><button>Button 1</button></a>
    <a href="page2.html"><button>Button 2</button></a>
    <a href="page3.html"><button>Button 3</button></a>
    <a href="page4.html"><button>Button 4</button></a>
    <a href="page5.html"><button>Button 5</button></a>
  </div>
</body>

</html>

不是回答，而是建议

你可以在上面的代码片段中看到，按钮之间没有空格，但是如果你尝试给予按钮相同的边距。同样的问题，你也会遇到。现在我建议使用FlexBox。这是一个伟大的工具来处理布局。你可以得到更多关于它的细节here .使用flexbox后，你可以给予你选择的利润来分隔按钮和代码将看起来像：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .bottom-buttons {
      position: fixed;
      bottom: 0;
      width: 100%;
      display: flex;
    }
    
    .bottom-buttons a {
      width: 20%;
      margin: 0 10px;
    }
    
    .bottom-buttons button {
      width: 100%;
    }
  </style>
</head>

<body>
  <div class="bottom-buttons">
    <a href="page1.html"><button>Button 1</button></a>
    <a href="page2.html"><button>Button 2</button></a>
    <a href="page3.html"><button>Button 3</button></a>
    <a href="page4.html"><button>Button 4</button></a>
    <a href="page5.html"><button>Button 5</button></a>
  </div>
</body>

</html>

问题二

是的，如果你必须使用多个html文件的代码，在一个单独的文件中做是一个很好的方法。这里有一个很好的细节如何做到这一点。
1.将样式放在单独的文件中，即styles.css
1.使用以下行<link rel="stylesheet" href="styles.css">将样式与html链接起来
More details about linking styles

赞(0）分享  回复(0）举报  2023-05-30
rjzwgtxy

rjzwgtxy4#

将此添加到“index.html”部分允许我的CSS代码交换到“style.css”文件：

<link rel="stylesheet" href="styles.css">

按钮间距问题通过将我在“style.css”中的按钮代码更改为以下内容来解决：

.bottom-buttons {
    position: fixed;
    bottom: 0;
    width: 100%;
    font-size: 0px;
}

.bottom-buttons button {
    font-size: 14px;
    width: 20%;
    height: 5%;
}

感谢所有帮助过我的人！

赞(0）分享  回复(0）举报  2023-05-30
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com