CSS填充将右对齐的对象推出页面

bjg7j2ky 于 2023-01-03 发布在其他

关注(0)|答案(2)|浏览(106)

我正在为我的网站制作一个导航栏。我有一个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>

css

来源：https://stackoverflow.com/questions/74964428/css-padding-pushing-right-aligned-objects-off-the-page

2条答案

按热度按时间

vc9ivgsu1#

你说头是100%的宽度，但是默认的box-sizing是content-box，这意味着头的内容是100%的宽度，这忽略了填充。将box-sizing更改为border-box，以便也考虑填充：

#header {
    box-sizing: border-box;
    . . .
}

赞(0）回复(0）举报 2023-01-03

9rnv2umw2#

您可以向按钮添加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>

赞(0）回复(0）举报 2023-01-03

我来回答

CSS填充将右对齐的对象推出页面

2条答案

相关问题

热门标签

最新问答