如何对齐Login链接

Question

Hellow我是这个开发的新手，我可以问一下如何对齐Login链接，如图所示，Login链接的位置低于其他文本。非常感谢。

.headerContainer {
  font-size: 1.5rem;
  width: 100%;
}

.header1 {
  background-color: #283747;
  color: #fff;
  border-bottom: .2rem solid gray;
  padding: 1.5rem;
  position: relative;
}

li.headerLeft {
  float: left;
}

li.headerCenter {
  text-align: center;
}

li.headerRight {
  float: right;
}

<div class="headerContainer">
  <ul class="header1">
    <li class="headerLeft">Chat</li>
    <li class="headerCenter">Learn and Be Motivated..</li>
    <li class="headerRight">Login</li>
  </ul>
</div>

Answer 1

在display:inline-block上添加li.headerCenter，

或者您可以使用display:flex。而不是float:right.

float:right始终会创建新行。

.headerContainer {
	font-size: 1.5rem;
	width: 100%;
}

.header1 {
	background-color: #283747;
	color: #fff;
	border-bottom: .2rem solid gray;
	padding: 1.5rem;
	position: relative;
  display:flex; /*add this */
  flex-direction:row;/*add this */
}

li.headerLeft {
	margin-right: auto;/*update this */
}

li.headerCenter {
	text-align: center;
}

li.headerRight {
	margin-left: auto;/*update this */
}

<div class="headerContainer">
		<ul class="header1">
			<li class="headerLeft">Chat</li>
			<li class="headerCenter">Learn and Be Motivated..</li>
			<li class="headerRight">Login</li>
		</ul>
	</div>

Answer 2

我为display:inline-block课程添加了headerCenter，而header1课程我添加了text-align:center，inline-block元素与center元素对齐

.headerContainer {
  font-size: 1.5rem;
  width: 100%;
}

.header1 {
  background-color: #283747;
  color: #fff;
  border-bottom: .2rem solid gray;
  padding: 1.5rem;
  position: relative;
  text-align: center;
}

li.headerLeft {
  float: left;
}

li.headerCenter {
  display: inline-block;
}

li.headerRight {
  float: right;
}

<div class="headerContainer">
  <ul class="header1">
    <li class="headerLeft">Chat</li>
    <li class="headerCenter">Learn and Be Motivated..</li>
    <li class="headerRight">Login</li>
  </ul>
</div>

Answer 3

试试这个：

li.headerCenter {
    display: inline-block;
}

.header1 {
    text-align: center;
    //other css
}

.headerContainer {
	font-size: 1.5rem;
	width: 100%;
}

.header1 {
	background-color: #283747;
	color: #fff;
	border-bottom: .2rem solid gray;
	padding: 1.5rem;
	position: relative;
	text-align: center;
}

li.headerLeft {
	float: left;
}

li.headerCenter {
	display: inline-block;
}

li.headerRight {
	float: right;
}

<div class="headerContainer">
		<ul class="header1">
			<li class="headerLeft">Chat</li>
			<li class="headerCenter">Learn and Be Motivated..</li>
			<li class="headerRight">Login</li>
		</ul>
</div>