Question

I'm making a navigation bar where the the main pages can be accessed in the middle, but I want the log in button to appear to the far right.

I contain the links inside a <ul> element and I use margin: auto; to center it.

The problem occurs when I make another link outside the <ul> and attempt to put it on top of the margin. It appears under the navigation bar.

Here is what it looks like:

这是使用inspect元素，显示<ul>的边距

＆＃13;

#navBar {
			margin: 0px;
			padding: 0px;
			width: 100%;
			height: 59px;
			background-color: #0040ff;
		}

	    #navBar a:link, #navBar a:visited, #logInContainer a:link {
	        text-decoration: none;
	        background-color: #0040ff;
	        color: white;
	        border: 1px solid black;
	        padding: 21px;
	  		margin: 1px;
	        display: inline-block;
	        list-style: none;
	        font: 12px arial;
	    }

	    #navBar a:hover, #navBar a:active {
	        background-color: #3366ff;
	    }

	    ul {
	        width: 300px;
	        margin: auto;
	        text-align: center;
	    }

	    #logIn {
	    	float: right;
	    }

＆＃13;

   <div id="navBar">
	    <ul>
	        <a href="index.html">Chat</a>
	        <a href="status.php">Status</a>
	    </ul>

	    <a href="#" id="logIn"><i class="material-icons" style="font-size:12px;">accessibility</i> Logg Inn</a>
	</div>

＆＃13;

导航栏的Html代码：

导航栏的CSS代码：

到目前为止，我已尝试使用z-index，所有类型的位置并显示。

Answer 1

快速解决方法是在登录按钮上使用负边距：

#logIn {
   float: right;
   margin-top: -60px !important;
 }

或者，您可以使用flexbox：

从float移除#logIn，然后添加

display: flex;

到#navBar

＆＃13;

#navBar {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 59px;
  background-color: #0040ff;
  display: flex;
}

#navBar a:link,
#navBar a:visited,
#logInContainer a:link {
  text-decoration: none;
  background-color: #0040ff;
  color: white;
  border: 1px solid black;
  padding: 21px;
  margin: 1px;
  display: inline-block;
  list-style: none;
  font: 12px arial;
}

#navBar a:hover,
#navBar a:active {
  background-color: #3366ff;
}

ul {
  width: 300px;
  margin: auto;
  text-align: center;
}

＆＃13;

<div id="navBar">
  <ul>
    <a href="index.html">Chat</a>
    <a href="status.php">Status</a>
  </ul>

  <a href="#" id="logIn"><i class="material-icons" style="font-size:12px;">accessibility</i> Logg Inn</a>
</div>

＆＃13;

Answer 2

您可能需要添加一些媒体查询以在较小的屏幕上移动内容，但是在桌面上这样做很好。

我已将position: relative;添加到容器#navBar，并在元素右侧创建了登录按钮position: absolute;。这将把它放在右边。然后你只需要相应地设置按钮的样式以匹配你的设计等。

    #navBar {
        margin: 0px;
        padding: 0px;
        width: 100%;
        height: 59px;
        background-color: #0040ff;
        position: relative;
    }

    #navBar a:link, #navBar a:visited, #logInContainer a:link {
        text-decoration: none;
        background-color: #0040ff;
        color: white;
        border: 1px solid black;
        padding: 21px;
        margin: 1px;
        display: inline-block;
        list-style: none;
        font: 12px arial;
    }

    #navBar a:hover, #navBar a:active {
        background-color: #3366ff;
    }

    ul {
        width: 300px;
        margin: auto;
        text-align: center;
    }

    #logIn {
        position: absolute;
        top: 0;
        right: 0;
        float: right;
    }

Answer 3

您必须将"match_parent"显示为内嵌块，以便它不会填充整个宽度。

<强>修正：

使用以下内容替换css文件中的<ul>元素样式：

ul

CSS制作<a> appear over </a> <ul> <a> margin

3 个答案: