Question

我有这个导航栏，我想在右边有两个单独的链接。但是似乎在浮动：对；对。对我的div无效。而是与其他元素对齐。我们该怎么做？

    /*css*/
    #navigation {
    	background-color: rgba(0,0,0,0.5);
        overflow: hidden;
        color: white;
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 46px;
        border-top: 1px solid #6a6a6a;

        .navigation-links-left {
    	    width: max-content;
    	    padding: 15px 0px;
        	border-left: 1px solid #6a6a6a;
        	margin: 0px;
    	    a {
    	    	padding: 15px 16px;
       	 		border-right: 1px solid #6A6A6A;
       	 		margin: -3px;
    	    }
    	}

    	.navigation-links-right {
    		    float: right;
    	}
    }

    <!-- HTML-->
    <div id="navigation">
      <div class="wrapper">
    	<div class="navigation-links-left">
    	<a><img src="images/icon/icon_nav_03.png"></a>
    	<a>KU 스타트업 <img src="images/icon/icon_nav_04.png"></a>
    	<a>인사말</a>
    		<div class="navigation-links-right">
    			<a><img src="images/icon/icon_nav_01.png"></a>
    			<a><img src="images/icon/icon_nav_02.png"></a>
    		</div>
    	</div>
    </div>
  </div>

Answer 1

您需要应用div float left和float right参见下面的演示，我还纠正了将navigation-links-right包裹在navigation-links-left div内的代码中的一些html，因此进行了纠正

/*css*/
#navigation {
background-color: rgba(0,0,0,0.5);
overflow: hidden;
color: white;
position: absolute;
bottom: 0;
width: 100%;
height: 46px;
border-top: 1px solid #6a6a6a;
}
.navigation-links-left {
    width: max-content;
    padding: 15px 0px;
    border-left: 1px solid #6a6a6a;
    margin: 0px;
    float:left;
    }
    a {
        padding: 15px 16px;
        border-right: 1px solid #6A6A6A;
        margin: -3px;
    }



.navigation-links-right {
    float: right;
    padding: 15px 0px;
}

<div id="navigation">
            <div class="wrapper">
                <div class="navigation-links-left">
                   <a><img src="images/icon/icon_nav_03.png"></a>
                   <a>KU 스타트업 <img src="images/icon/icon_nav_04.png">
                   </a>
                   <a>인사말</a>
                </div>
              <div class="navigation-links-right">
                <a><img src="images/icon/icon_nav_01.png"></a>
                <a><img src="images/icon/icon_nav_02.png"></a>
              </div>
                
            </div>
        </div>

Answer 2

似乎您的navigation-links-right元素嵌套在您的navigation-links-left中。尝试将其带到外面：

#navigation {
    background-color: rgba(0,0,0,0.5);
    overflow: hidden;
    color: white;
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 46px;
    border-top: 1px solid #6a6a6a;
}

.navigation-links-left, .navigation-links-right {
    width: max-content;
    padding: 15px 0px;
    display: inline-block;
    border-left: 1px solid #6a6a6a;
    margin: 0px;
}

.navigation-links-left a, .navigation-links-right a {
    padding: 15px 16px;
    border-right: 1px solid #6A6A6A;
    margin: -3px;
}


.navigation-links-right {
    float: right;
}

<div id="navigation">
    <div class="wrapper">
        <div class="navigation-links-left">
          <a><img src="images/icon/icon_nav_03.png"></a>
          <a>KU 스타트업 <img src="images/icon/icon_nav_04.png"></a>
          <a>인사말</a>
        </div>
        <div class="navigation-links-right">
          <a><img src="images/icon/icon_nav_01.png"></a>
          <a><img src="images/icon/icon_nav_02.png"></a>
      </div>
    </div>
</div>

我还认为这是CSS Flexbox的良好应用程序：

#navigation {
    background-color: rgba(0,0,0,0.5);
    border-top: 1px solid #6a6a6a;
    bottom: 0;
    color: white;
    height: 46px;
    overflow: hidden;
    position: absolute;
    width: 100%;
}

.wrapper {
    display: flex;
    height: 100%;
    justify-content: space-between;
}

.navigation-links-left, .navigation-links-right {
    align-items: center;
    border-left: 1px solid #6a6a6a;
    display: inline-flex;
    height: 100%;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.navigation-links-left a, .navigation-links-right a {
    border-right: 1px solid #6A6A6A;
    margin: -3px;
    padding: 15px 16px;
}

<div id="navigation">
    <div class="wrapper">
        <div class="navigation-links-left">
          <a><img src="images/icon/icon_nav_03.png"></a>
          <a>KU 스타트업 <img src="images/icon/icon_nav_04.png"></a>
          <a>인사말</a>
        </div>
        <div class="navigation-links-right">
          <a><img src="images/icon/icon_nav_01.png"></a>
          <a><img src="images/icon/icon_nav_02.png"></a>
      </div>
    </div>
</div>

TP右对齐单独的链接

2 个答案: