You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何用HTML和CSS实现顶部导航栏左右内容对齐？

avatar
算力阿峰
2026-7-1
顶部导航栏左右两侧文本无法水平对齐问题

我在制作顶部导航栏时，遇到了右侧文本无法和左侧文本保持水平对齐的问题。

我的CSS代码 

.header-top-right {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
::after, ::before {
    box-sizing: border-box;
}
.header-top-right ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
dl, ol, ul {
    margin-top: 0;
    margin-bottom: 1rem;
    margin: 0px;
    padding: 0px;
}
ul {
    margin: 0px;
    padding: 0px;
}
.header-top-right ul li:last-child {
    margin-right: 0;
    padding-right: 0;
}
.header-top-right ul li {
    font-size: 12px;
    padding-right: 20px;
    margin-right: 20px;
    position: relative;
}
li {
    list-style: none;
}
.header-top-right ul li a {
    color: #656565;
}
a, button {
    color: #1696e7;
    outline: medium none;
}
a, .button {
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
a {
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
}
.header-style-two .header-top-right ul li i {
    font-size: 14px;
    color: #a4a4a4;
}
.header-top-right ul li i {
    margin-right: 7px;
}
.header-top-right ul li i, 
.header-top-right ul li a:hover  {
    color: #0163d2;
}
.header-style-two .header-top-right ul li span {
    margin: 0 5px;
}
.header-top-right ul li a {
    color: #656565;
}
.header-style-two .header-top-area {
    background: #fbfbfb;
    padding: 14px 0;
    border-bottom: 1px solid #eeeeee;
}
.header-top-area {
    background: #eeeeee;
    padding: 14px 0;
}
.custom-container-two {
    max-width: 1428px;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.header-top-left {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
.header-top-left ul {
    display: flex;
    align-items: center;
}
.header-top-left ul li {
    display: block;
    position: relative;
    font-size: 12px;
    color: #656565;
    padding-right: 15px;
    margin-right: 15px;
}
.header-top-left ul > li > div {
    display: flex;
    align-items: center;
}
.dropdown, .dropleft, .dropright, .dropup {
    position: relative;
}
.header-top-left .dropdown button {
    border: none;
    background: transparent;
    font-size: 12px;
    color: #656565;
    font-weight: 400;
    padding: 0 0 0 10px;
}
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}
.dropdown-toggle {
    white-space: nowrap;
}
[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button;
}
button, select {
    text-transform: none;
}
button, input {
    overflow: visible;
}
button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
button {
    border-radius: 0;
}
.header-top-left .dropdown img {
    margin-right: 8px;
}
img {
    vertical-align: middle;
    border-style: none;
}
.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 0.25rem;
}
.header-top-left .dropdown .dropdown-item {
    color: #6f6f6f;
    font-size: 12px;
}
.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}
.header-top-left ul li::after, .header-top-right ul li::after {
    content: "|";
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    color: #bcbcbc;
}
.header-top-left ul li:last-child {
    margin-right: 0;
    padding-right: 0;
}
header {
    display:block;
}

预期效果

预期顶部导航栏效果

我的HTML代码 

<header class="header-style-two">
    <!-- header-top -->
    <div class="header-top-area">
        <div class="custom-container-two">
            <div class="row">
                <div class="header-top-left">
                    <ul>
                        <li>
                            <div class="ship-to">
                                <span>Ship to</span>
                                <div class="dropdown">
                                    <button class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <img src="ico/ship_flag.png" alt=""> US/USD
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                        <a class="dropdown-item" href="#"><img src="ico/australia.png" alt="">AUS/USD</a>
                                        <a class="dropdown-item" href="#"><img src="ico/bng.png" alt="">BNG/TK</a>
                                        <a class="dropdown-item" href="#"><img src="ico/india.png" alt="">IN/RP</a>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="header-top-guide">
                                <span>Quick Guide</span>
                                <div class="dropdown">
                                    <button class="dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        Help
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
                                        <a class="dropdown-item" href="terms-conditions.html">Returns</a>
                                        <a class="dropdown-item" href="terms-conditions.html">Privacy</a>
                                        <a class="dropdown-item" href="terms-conditions.html">Terms</a>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="header-top-guide">
                                <div class="dropdown">
                                    <button class="dropdown-toggle" type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        Sell With Us
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
                                        <a class="dropdown-item" href="my-account.html">Seller Login</a>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="header-top-right">
                    <ul>
                        <li>
                            <a href="my-account.html"><i class="ri-user-line"></i>Register</a>
                            <span>or</span>
                            <a href="my-account.html">Sign in</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</header>

解决方法

  1. 修复HTML结构错误：原HTML中header-top-left外层多了一个多余的闭合</div>，导致header-top-right不在.row容器内，这是对齐失效的核心原因，修正后要确保两个区块都是.row的直接子元素。

  2. 调整区块宽度与对齐规则：

/* 给row添加垂直居中，确保左右内容在同一水平线 */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    align-items: center;
}

/* 移除左右区块的width:100%，避免占满整行换行 */
.header-top-left {
    flex: 1; /* 左侧占满剩余空间 */
    position: relative;
    padding-right: 15px;
    padding-left: 15px;
}
.header-top-right {
    position: relative;
    padding-right: 15px;
    padding-left: 15px;
}

完成以上调整后，左右两侧的文本即可保持水平对齐。

内容的提问来源于stack exchange，提问作者Urban Bot

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.07.01 21:17:02