Question

导航栏中的链接很多。大多数链接位于左侧。我想将一些链接放在右边（right-side-login-cart）。给我带来麻烦的部分是我可以使链接正确，但是不能使链接垂直对齐。

我尝试了很多不同的方法来使其正常工作。例如，我有float:right;，使用transform来平移Y，并尝试使用垂直对齐。

一些不同的尝试：

HTML

<div class="links-at-top">
    <div class="links-div">
        <a href="/">
          <img src="example.com/img">
        </a>
        <a href="/link-1">Link1</a>
        <a href="/link-2">Link2</a>
    </div>
    <div class="right-side">
        <div class="positioning">
            <a id="right-link-1">RightLink1</a>
            <a id="right-link-2">RightLink2</a>
        </div>
    </div>
</div>

尝试1：

CSS：

.right-side {
    padding-right: 50px;
    display: inline-block;  
}
.positioning {
    position: absolute;
    right: 0;
    transform: translateY(-50%);        
}

尝试2：

CSS：

.right-side {
    padding-right: 50px;
    display: inline-block;  
}
.positioning {
    vertical-align: middle;     
}

Answer 1

将.right-div div添加到与其他链接相同的div中，以便它们位于同一行。然后，您可以向右浮动。

.links-div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<div class="links-at-top">
    <div class="links-div">
    
        <div>
            <a href="/link-1">Link1</a>
            <a href="/link-2">Link2</a>
        </div>

        <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" alt="" />

        <div>
            <a id="right-link-1">RightLink1</a>
            <a id="right-link-2">RightLink2</a>
        </div>
    </div>
</div>

Answer 2

您可以考虑使用flex-box

.links-at-top{
  display: flex;
  justify-content:space-between;
  align-items:center;
}

<div class="links-at-top">
    <div class="links-div">
        <a href="/link-1">Link1</a>
        <a href="/link-2">Link2</a>
    </div>
    <div class="right-side">
        <div class="positioning">
            <a id="right-link-1">RightLink1</a>
            <a id="right-link-2">RightLink2</a>
        </div>
    </div>
</div>

Answer 3

使.links-div和.right-side都显示：inline-block，然后将右侧浮动到右侧。

<div class="links-at-top">
<div class="links-div"> 
    <a href="/link-1">Link1</a>
    <a href="/link-2">Link2</a>
</div>
<div class="right-side">
    <ul class="positioning">
       <li> <a id="right-link-1">RightLink1</a></li>
       <li> <a id="right-link-2">RightLink2</a></li>
    </ul>
</div>

.right-side {   
     display: inline-block;  
     float:right;  
 }

.links-div{
  display:inline-block;
 }

将div放置在导航栏中的垂直居中位置和右侧

3 个答案: