标题项使用float right = float left？

Question

我有三个带有float right的社交媒体按钮，所有的按钮都有不同的宽度。在标题的右侧也有一个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>

我想这就是你想要的，你可以通过改变边际的值来改变社交网络之间的边际。