Html CSS Padding 将右对齐的对象推离页面

发布于12月31日

我正在为我的网站做一个导航栏.我有一个div，我想在其中有一个徽标，并在最右边对齐一个下载按钮.我使用了css属性‘JUSTIFY-CONTENT’和‘SPACE-BETWEEN’来将按钮向右对齐.然而，当我在div的左侧添加填充时，按钮被推出页面.

以下是我的代码:

  body, html {
            margin: 0;
            background-color: #000000;
        }
        #header {
            padding-top: 10px;
            padding-bottom: 10px;
            height: 30px;
            position: fixed;
            background-color: rgb(10, 98, 160, .5);
            width: 100%;
            border-bottom: 1px solid #808080;
            display: flex;
            justify-content: space-between;
            padding-left: 20px;
        }

    <div id="header">
        <img src="titanium_tsp.png" height="100%">
        <button>Download</button>
    </div>

推荐答案

您可以在按钮上添加一个margin-right，以确保您取消了填充.

body, html {
            margin: 0;
            background-color: #000000;
        }
        #header {
            padding-top: 10px;
            padding-bottom: 10px;
            height: 30px;
            position: fixed;
            background-color: rgb(10, 98, 160, .5);
            width: 100%;
            border-bottom: 1px solid #808080;
            display: flex;
            justify-content: space-between;
            padding-left: 20px;
        }
        
        #header button {
            margin-right: 20px;
        }

<div id="header">
        <img src="titanium_tsp.png" height="100%">
        <button>Download</button>
    </div>

Html相关问答推荐

srcset和大小总是下载最大的

如何删除html原生对话框的宽度

在 bootstrap 中的弹性项之间添加连接行

调整一组IMG的大小以适应容器DIV

子元素的单一背景

希望平稳过渡到悬停状态

当div位于flexbox中时，如何使div的宽度与高度相同

如何实现与内嵌图像对齐的自动换行？

白色栏超出页面100%的右侧

如何使用CSS Select 表亲元素

动态计算高度时 Div 不保持 1/1 纵横比

显示填充正方形的图形的简单页面的 HTML 代码

Cargo 在网格中的排列

如何将 2 种不同的 colored颜色应用于 css 中的复选框？

提交前的验证表单未显示任何验证消息？

如何让 backdrop-filter： blur() 效果在 iOS 上运行？

项目的水平列表：倒数第二个项目居中，而最后一个项目占据所有剩余空间

打开 Bootstrap 模式时无法获得模糊的背景

使用 htmloutput 在shiny 的应用程序中呈现文本

所有幻灯片上的 Quarto RevealJS 标题

实用课程推荐