CSS头 - 不同的对齐

我想将它们添加到同一行，以便头部看起来更加整洁，什么是正确的代码使用？

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

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

 
.phone { 
 
\t text-align: right; 
 
\t font-weight: bold; 
 
\t padding-right: 20px; 
 
\t 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>

来源

2017-04-08 LewisJUK

可以实现与float。左边是你想要走的人，右边是电话号码，头部是overflow: hidden。

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

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

 
.phone { 
 
\t font-weight: bold; 
 
\t margin-right: 20px; 
 
\t 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>

来源

2017-04-08 18:39:55

这应该这样做。请注意，我将左右内容放在单独的容器中。仔细观察标记。

header { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
    min-height: 60px; 
 
}

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

来源

2017-04-08 18:40:40

你应该插入免费电话：0800 096 1617至DIV类的头和使用CSS的位置是：绝对的;正确:(你可以操纵它来修复免费电话）;

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

来源

2017-04-08 18:41:46

改为使用浮动。 .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>

希望这个作品，因为它并没有进行测试，因为我是在移动现在。

来源

2017-04-08 18:44:17

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

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

 
.phone { 
 
\t font-weight: bold; 
 
\t padding-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>

您必须添加浮动：左;到.header类并添加float：right;到.phone类

来源

2017-04-08 18:52:34

CSS头 - 不同的对齐

回答

相关问题