CSS标题 - 不同的对齐方式

Question

Image of Webpage

我想将它们添加到同一行，这样标题看起来更整洁，使用的代码是什么？

.header{
	border-bottom:1px solid #eee;
	padding:10px 0px;
	width:100%;
	text-align:left;
}

.header a{
	color:#333;
	text-decoration: none;
	margin-left: 20px;
}

.phone {
	text-align: right;
	font-weight: bold;
	padding-right: 20px;
	align-content: right;
}

<div class="header">
<a href="/">Home</a>
<a href="products.html">Products</a>
<div class="phone"><a>Freephone: 0800 096 1617</a></div>
</div>

Answer 1

您可以使用float实现这一目标。左边是你想要的左边，右边是电话号码，左边是overflow: hidden标题。

.header{
	border-bottom:1px solid #eee;
	padding:10px 0px;
        overflow: hidden;
	width: 100%;
}

.header a{
	color:#333;
	text-decoration: none;
	margin-left: 20px;
        float: left;
}

.phone {
	font-weight: bold;
	margin-right: 20px;
	float: right;
}

<div class="header">
<a href="/">Home</a>
<a href="products.html">Products</a>
<div class="phone"><a>Freephone: 0800 096 1617</a></div>
</div>

Answer 2

你应该将免费电话：0800 096 1617插入div类头并使用Css位置：绝对;右:(你可以操纵它来修理免费电话）;

$ strings mod_wsgi.so | grep -w -A 2 "wsgi_init"
wsgi_init
mod_wsgi/%s
2.7.5

Answer 3

使用浮动代替。 .clear类意味着停止浮动，这是必要的。此外，手机不需要在div内，并且应该具有手机ID而不是手机类，因为只有一个手机元素。您根本不需要对齐和文本对齐。

.header {
  border-bottom: 1px solid #eee;
  padding: 10px 0px;
  width: 100%;
}

.header a {
  color: #333;
  text-decoration: none;
  margin-left: 20px;
  float: left;
}

#phone {
  font-weight: bold;
  padding-right: 20px;
  float: right !important;
}

.clear {
  clear: both;
}

<div class="header">
  <a href="/">Home</a>
  <a href="products.html">Products</a>
  <a id="phone">Freephone: 0800 096 1617</a>
  <div class="clear"></div>
</div>

希望这可行，因为它没有经过测试，因为我现在在移动设备上。

Answer 4

＆＃13;

＆＃13;

.header{
	border-bottom:1px solid #eee;
	padding:10px 0px;
	width:100%;
    float:left;
}

.header a{
	color:#333;
	text-decoration: none;
	margin-left: 20px;
}

.phone {
	font-weight: bold;
	padding-right: 20px;
    float:right;
}

＆＃13;

<div class="header">
<a href="/">Home</a>
<a href="products.html">Products</a>
<div class="phone"><a>Freephone: 0800 096 1617</a></div>
</div>

＆＃13;

＆＃13;

＆＃13;

你必须添加float：left;到.header类并添加float：right;到.phone类