个人中心
gpt4 book ai didi

html - 定位按钮和 Logo 等距

转载 作者：太空宇宙 更新时间：2023-11-04 02:06:20 28 4
gpt4 key购买 nike

我正在尝试创建一个标题，中间有一个 Logo ，两侧有两个按钮。我希望按钮和 Logo 在水平方向上均匀分布，然后在垂直空间的中心。下图是我目前所拥有的，粉红色只是为了让我可以看到标题在做什么。 What I have so far

这是我的 HTML:

<body>
    <div id="container">
        <header>
            <div id="nav_left">
                <button class="nav_button">About Me</button>
                <button class="nav_button">Case Studies</button>
            </div>
            <div id="logo">
                <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
                <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
                <svg width="100%" height="100%" viewBox="0 0 513 700" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
                    <g transform="matrix(1.16129,0,0,1.16129,-210.521,-117.321)">
                        <path d="M381.924,101.027L301.667,101.027C301.667,101.027 221.281,100.584 221.411,181.284C221.54,261.984 221.411,301.669 221.411,301.669C221.411,301.669 221.825,381.773 301.667,381.926C381.51,382.078 261.539,381.926 261.539,381.926C261.539,381.926 181.26,381.643 181.282,462.182C181.304,542.722 181.282,622.696 181.282,622.696C181.282,622.696 180.9,702.907 261.539,702.952C342.178,702.998 381.924,702.952 381.924,702.952L381.924,622.696L301.667,622.696C301.667,622.696 261.724,622.03 261.539,582.567C261.354,543.104 261.539,502.311 261.539,502.311C261.539,502.311 261.628,462.192 301.667,462.182C341.707,462.173 381.924,462.182 381.924,462.182L381.924,301.669L341.796,301.669C341.796,301.669 301.478,300.882 301.667,261.541C301.857,222.2 301.667,221.412 301.667,221.412C301.667,221.412 302.065,181.256 341.796,181.284C381.526,181.312 381.924,181.284 381.924,181.284L381.924,101.027L381.924,101.027Z" style="fill:rgb(60,122,190);" />
                        <path d="M422.052,101.027L502.309,101.027C502.309,101.027 582.289,101.974 582.566,181.284C582.842,260.595 582.566,301.669 582.566,301.669C582.566,301.669 581.877,381.579 502.309,381.926C422.741,382.273 542.437,381.926 542.437,381.926C542.437,381.926 622.641,383.525 622.694,462.182C622.747,540.84 622.694,702.952 622.694,702.952L542.437,702.952L542.437,502.311C542.437,502.311 541.684,461.99 502.309,462.182C462.934,462.375 422.052,462.182 422.052,462.182L422.052,301.669L462.181,301.669C462.181,301.669 501.568,300.956 502.309,261.541C503.05,222.126 502.309,221.412 502.309,221.412C502.309,221.412 501.63,181.454 462.181,181.284C422.731,181.114 422.052,181.284 422.052,181.284L422.052,101.027L422.052,101.027Z" style="fill:rgb(60,122,190);" />
                    </g>
                </svg>
            </div>
            <div id="nav_right">
                <button class="nav_button">Contact Me</button>
                <button class="nav_button">Other</button>
            </div>
        </header>
    </div>
</body>

这是我的 CSS:

body {
    margin: 0;
}

#container {
    width: 100%;
    margin: 0;
}

header {
    width: 100%;
    background-color: pink;
}

#logo {
    height: 250px;
    width: 250px;
    margin: auto;
    border: 0px;
    padding: 0px;
}

#nav_left {
    float: left;
}

#nav_right {
    float: right;
}

.nav_button {
    width: 150px;
    float: left;
    margin-left: 5%;
    margin-top: 25%;
    margin-bottom: 25%;
    position: inherit;
}

最佳答案

如果我理解正确(你需要 5 个均匀宽的列)，你可以使用 bootstrap 或 Flexbox .使行方向和增长 1，使它们均匀宽度。然后将您的元素放入其中并设置样式，使它们出现在列的中心。

关于html - 定位按钮和 Logo 等距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40662268/

28 4 0
文章推荐： python - 在 while 循环中更改张量的单个值
文章推荐： node.js - -bash : node: command not found (on EC2 instance)
文章推荐： C 传递结构作为参数
文章推荐： python - 大量的 x,y 坐标。在彼此一定距离内找到任何东西的有效方法？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com