如何使用CSS分隔HTML文本

Question

如果你去汗学院，你会看到登录/注册和不同方面的主题，以及中心的khanacademy标志。

我一直试图让我的网站变得一样但总是出错了

    body{
	font-family: 'Comfortaa', cursive;
    }
    .header{
	    border-bottom: 1px solid #eee;
	    padding: 10px 0px;
	    width: 100%;
	    text-align: center;
    }
    .header a{
	    color: #333;
	    text-decoration: none;
	    margin: 250px;
    }
    .header a:hover{
	    color: #EEEEEE;
    }

 <div class="header">
		<a href="/" class="a1">Test</a>
		<a href="logsign.php" class="a2">Login / Signup</a>
	</div>

Answer 1

您可以使用display: flex; justify-content: space-between;

轻松完成此操作

＆＃13;

＆＃13;

.header {
  display: flex;
  justify-content: space-between;
  max-width: 960px;
  width: 90%;
  margin: auto;
}

＆＃13;

<div class="header">
    <a href="/" class="a1">Test</a>
    <a href="logsign.php" class="a2">Login / Signup</a>
 </div>

＆＃13;

＆＃13;

＆＃13;

使用相同的技术，您可以轻松地在中间添加徽标。

＆＃13;

＆＃13;

.header {
  display: flex;
  justify-content: space-between;
  max-width: 960px;
  width: 90%;
  margin: auto;
}

＆＃13;

<div class="header">
    <a href="/" class="a1">Test</a>
    <a href="/">Logo</a>
    <a href="logsign.php" class="a2">Login / Signup</a>
 </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

可汗学院的方式是3个容器元素。然后他们证明了这些单独元素的内容。在这里，我没有使用flexbox，只使用浮动和clearfix。

HTML

<header>
    <div class="header_left"></div>
    <div class="header_center"></div>
    <div class="header_right"></div>
</header>

CSS

header:after{
    content:"";
    display:block;
    clear:both;
}

header > div{
    float:left;
}

.header_left{
    width:40%;
    text-align:left;
}

.header_center{
    width:20%;
    text-align:center;
}

.header_right{
    width:40%;
    text-align:right;
}