帶浮點的標頭項目right = float left如何？

Question

我有三個社交媒體按鈕與浮動右所有按鈕有不同的寬度。標題右側還有一個h1，右側浮動。但是我的社交媒體按鈕右側浮動，不是浮動的，但它位於標題的左側。

/*nieuwsbrief*/ 
#zoekveldandsocial > h1{ 
color: white; 
float: right; 
background-color: #e8b215; 
font-size: 12px; 
height: 15px; 
padding: 13px; 
text-align: center; 
width: 100px; 


} 

/*facebook*/ 
#social > img:first-of-type{ 
width: 2%; 
} 

/*twitter*/ 
#social >img:nth-of-type(2){ 

width: 2%; 
} 

/*linkedin*/ 
#social > img:nth-of-type(3){ 

width: 2.1%; 
} 


#social{ 
float: right; 

} 


<div id="zoekveldandsocial"> 
<h1>Nieuwsbrief</h1> 
<div id="social"> 
<img src="img/facebook.png" alt="facebook" /> 
<img src="img/twitter.png" alt="twitter" /> 
<img src="img/linkedin.png" alt="linkedin" /> 
</div> 

https://jsfiddle.net/27zs3nhn/

Answer 1

試試這個，你需要改變浮動從右到左浮動的H1的。 https://jsfiddle.net/27zs3nhn/

color: white; 
    float: left; 
    background-color: #e8b215; 
    font-size: 12px; 
    height: 15px; 
    padding: 13px; 
    text-align: center; 
    width: 100px; 


    } 

    /*facebook*/ 
    #social > img:first-of-type{ 
    width: 2%; 
    } 

    /*twitter*/ 
    #social >img:nth-of-type(2){ 

    width: 2%; 
    } 

    /*linkedin*/ 
    #social > img:nth-of-type(3){ 

    width: 2.1%; 
    } 


    #social{ 
    float: right; 

    } 


    <div id="zoekveldandsocial"> 
    <h1>Nieuwsbrief</h1> 
    <div id="social"> 
    <img src="img/facebook.png" alt="facebook" /> 
    <img src="img/twitter.png" alt="twitter" /> 
    <img src="img/linkedin.png" alt="linkedin" /> 
    </div> 

Answer 2

你的代碼必須改變這種

/*nieuwsbrief*/ 
#zoekveldandsocial > h1{ 
color: white; 
float: right; 
background-color: #e8b215; 
font-size: 12px; 
height: 15px; 
padding: 13px; 
text-align: center; 
width: 100px; 


} 

/*facebook*/ 
#social > img:first-of-type{ 
float: right; 
width: 2%; 

} 

/*twitter*/ 
#social >img:nth-of-type(2){ 
float: right; 
width: 2%; 
} 

/*linkedin*/ 
#social > img:nth-of-type(3){ 
float: right; 
width: 2.1%; 
} 


<div id="zoekveldandsocial"> 
<h1>Nieuwsbrief</h1> 
<div id="social"> 
<img src="img/facebook.png" alt="facebook" /> 
<img src="img/twitter.png" alt="twitter" /> 
<img src="img/linkedin.png" alt="linkedin" /> 
</div> 

然後它會告訴你你的願望..

Answer 3

CSS文件：

/*nieuwsbrief*/ 

#zoekveldandsocial > h1 { 
    color: white; 
    float: right; 
    background-color: #e8b215; 
    font-size: 12px; 
    height: 15px; 
    padding: 13px; 
    text-align: center; 
    width: 100px; 
} 

/*facebook*/ 
#social > img:first-of-type{ 
    width: 2%; 
} 
/*twitter*/ 
#social >img:nth-of-type(2){ 
    width: 2%; 
} 

/*linkedin*/ 
#social > img:nth-of-type(3){ 
    width: 2.1%; 
} 

#social{ 
    float: left; 
} 
.socialnetwork{ 
    display:inline; 
    margin:10px; 
    text-decoration:none; 
    padding: 10px; 
} 

HTML文件：

<div id="zoekveldandsocial"> 
    <h1>Nieuwsbrief</h1> 
    <div id="social"> 
     <a href="#" class="socialnetwork"><img src="img/facebook.png" alt="facebook" /></a> 
     <a href="#" class="socialnetwork"><img src="img/twitter.png" alt="twitter" /></a> 
     <a href="#" class="socialnetwork"><img src="img/linkedin.png" alt="linkedin" /></a> 
    </div> 

我一跳，這是你在尋找什麼，你可以改變邊界值改變社交網絡之間的空白。