1

所以我在这里有一些代码，我想让我的主导航在中间，然后是右上角的帐户和购物车选项卡。我希望它以一种方式显示“买入、卖出、交易……等”的标签直接位于中间，而不是位于页面左侧以及帐户和购物车容器的中间。

CSS

header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30p 10%;
text-align: center;
transition: all 0.4s ease 0s;}

.navigation {
list-style: none;
width: 10000px;
margin: 1%;}

.navigation li {
display: inline-block;
padding: 10px 20px;
float: center;}

.navigation li a {
transition: all 0.4s ease 0s}

.navigation li a:hover{
color:#75593e }

.home {
width: 65px;
height: 55px;
background: url("/images/ClosedBoxLogo.png");}

.home:hover {
background: url("/images/OpenBox.png") no-repeat;}

/* Cart and Account */

.rightside {
display: flex;
list-style: none;
align-items: center;
justify-content: space-between;}

.rightside li {
padding: 10px 20px;}

这是我的 HTML

<body>
    <header>
            <ul class="navigation">
                <li><a href="#">Buy</a></li>
                <li><a href="#">Sell</a></li>
                <li><a href="index.html"><img class="home" src="images/CloseBox.png" alt="Close Box" onmouseover="this.src='images/OpenBox.png';" onmouseout="this.src='images/CloseBox.png';"/></a></li>
                <li><a href="#">Sell</a></li>
                <li><a href="#">Buy</a></li>
            </ul>
            <ul>
                <div class="rightside">
                    <li><a href="#"> Account </a></li>
                    <li><a href="#"> Cart </a></li>
                </div>
            </ul>
    </header>

</body>
4

2 回答 2

0

检查它是否对您有用，或者您想要一些更改， onhover如果可能，还删除或更改您的 img，因为它看起来不太好：https ://codepen.io/the-wrong-guy/pen/ZEQXRRx?editors=1100

于 2020-06-29T19:26:35.860 回答
0

您可以采取的一种方法是使标题位置相对，而右侧 ul 是绝对位置。这将正确的列表项从自然 DOM 流中取出，因此主导航完全居中。通过使标题相对，您可以将正确的列表项相对于父项对齐。请记住，您必须编辑设计以实现移动响应，因为正确的链接在绝对定位时将不再遵循 flexbox 样式。

我对您的代码所做的编辑：

  • 添加了“位置：相对；” 到标题并修复了您的填充缺少“px”中的“x”
  • 删除了带有“rightside”类的 div 并将该类移至该父级 ul
  • 添加'位置：绝对; 右：0；边距：自动 0；' 到“右侧”类。边距：'自动 0;' 将 li 垂直居中于父级

工作 JsFiddle：https ://jsfiddle.net/bzjxnw4h/

header {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
text-align: center;
transition: all 0.4s ease 0s;}

.navigation {
list-style: none;
width: 10000px;
margin: 1%;}

.navigation li {
display: inline-block;
padding: 10px 20px;
float: center;}

.navigation li a {
transition: all 0.4s ease 0s;}

.navigation li a:hover{
color:#75593e; }

.home {
width: 65px;
height: 55px;
background: url("/images/ClosedBoxLogo.png");}

.home:hover {
background: url("/images/OpenBox.png") no-repeat;}

/* Cart and Account */

.rightside {
position: absolute;
right: 0;
margin: auto 0;
display: flex;
list-style: none;
align-items: center;
justify-content: space-between;}

.rightside li {
padding: 10px 20px;}
<body>
    <header>
            <ul class="navigation">
                <li><a href="#">Buy</a></li>
                <li><a href="#">Sell</a></li>
                <li><a href="index.html"><img class="home" src="images/CloseBox.png" alt="Close Box" onmouseover="this.src='images/OpenBox.png';" onmouseout="this.src='images/CloseBox.png';"/></a></li>
                <li><a href="#">Trade</a></li>
                <li><a href="#">Middle Man</a></li>
            </ul>
            <ul class="rightside">
                    <li><a href="#"> Account </a></li>
                    <li><a href="#"> Cart </a></li>
            </ul>
    </header>
   
</body>

于 2020-06-29T07:28:23.743 回答