html - 向右浮动的标题项 = 向左浮动如何？

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>