What's wrong with this code?

HTML & CSS
1

My blog: https://www.bestblogging.co.uk/
Can anyone tell me what’s wrong with this code that makes those social buttons arranged vertically? i want those to arrange horizontally. would appreciate your help. Thank you.

<style type="text/css">
    .hbzsub {
        background-color: rgb(255, 255, 255);
        width: 100%;
        height: 100%;
        border: 1px dashed #ddd;
    }
    
    .hbzsube {
        color: rgb(255, 255, 255);
        background-color: rgb(11, 172, 227);
        padding: 10px 0;
        text-align: center;
        font: bold 15px "trebuchet MS", "Tahoma";
        width: 100%;
    }
    
    .hbzemailform {
        width: 235px;
        margin: 10px auto;
    }
    
    #hbzemailbox {
        background-color: #FFF;
        color: #747474;
        width: 130px;
        border: 1px solid #D8D8D8;
        padding: 7px;
        height: 18px;
        display: inline-block;
        vertical-align: top;
        box-shadow: inset 0px 0px 5px #c2c2c2;
        box-sizing: content-box;
        font-size: 13px;
    }
    
    #hbzemailbutton {
        background-color: rgb(243, 93, 92);
        border: 1px solid rgb(215, 84, 83);
        color: rgb(255, 255, 255);
        width: 85px;
        font: bold 13px "trebuchet MS", "Tahoma";
        padding: 7px;
        text-align: center;
        cursor: pointer;
        display: inline-block;
        height: 34px;
    }
    
    #hbzemailbutton:hover {
        background-color: #E64C4B;
        border: 1px solid #BF4A49;
    }
    
    .hbzsignup-form {
        margin-top: 15px;
    }
    
    .hbzsocial-icons {
        overflow: hidden;
        text-align: center;
        display: block;
        margin: 20px auto;
    }
    
    .hbzsocial-icons ul {
        margin: 0px auto !important;
        text-align: center;
        padding: 0px !important;
        display: inline-block;
    }
    
    .hbzsocial-icons ul li {
        background: transparent none repeat scroll 0% 0% !important;
        border: medium none !important;
        float: left;
        list-style-type: none !important;
        padding: 0px !important;
        margin: 0px 5px !important;
    }
    
    .hbzsocial-icons ul li::before,
    .hbzsocial-icons ul li::after {
        display: none !important;
    }
   
    .hbzsocial-icons ul li a {
        background: url("http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/s1600/sprite_32x32.png") no-repeat scroll 0 0;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        display: inline-block;
        height: 34px;
        overflow: hidden;
        text-indent: -999px;
        transition: all 0.25s linear 0s;
        width: 34px;
    }
    
    .hbzsocial-icons ul li a:hover {
        background-color: #aeaeae !important;
    }
    
    .hbzsocial-icons ul li.social-facebook a {
        background-position: -62px 1px;
        background-color: #3b5998;
    }
    
    .hbzsocial-icons ul li.social-twitter a {
        background-position: -254px 1px;
        background-color: #00aced;
    }
    
    .hbzsocial-icons ul li.social-gplus a {
        background-position: -95px 0px;
        background-color: #dd4b39;
    }
    
    .hbzsocial-icons ul li.social-pinterest a {
        background-position: -159px 1px;
        background-color: #cb2027;
    }
    
    .hbzsocial-icons ul li.social-rss a {
        background-position: -190px 0px;
        background-color: #F87E12;
    }
</style>
2

Hi mhdbuilm, welcome to the forums! :slightly_smiling_face:

Use the </> button to format highlighted code so we can easily read it.

Already fixed by @Gandalf! :smiley:
Thanks now I can read the code!

1 Like
3

Instead of float, you coild use inline-block to get them on the same line.

.hbzsocial-icons ul li {
    background: transparent none repeat scroll 0% 0% !important;
    border: medium none !important;
   /* float: left; */ /* remove */
    display: inline-block;  /* add */
    list-style-type: none !important;
    padding: 0px !important;
    margin: 0px 5px !important;
}

If that doesn’t work as you want, please post again. :slightly_smiling_face:

4

It works! :smiley:
Thanks Erik. appreciate your help.
okay i will be careful about the posting format in future.

1 Like
5

Good to know the old trick worked :slightly_smiling_face:

But if you want to distribute the icons evenly(*) in a changing horizontal space without specified margins on the items, you could use flex-box as a better more general method to line them horizontally:

.hbzsocial-icons ul {
    display: flex;
    justify-content: space-around;
}

.hbzsocial-icons ul li {
    margin: 0;
]

There are a couple of other ways to do distribute them evenly, but I think flex-box is the currently most flexible method. :grinning:

1 Like
6

Should have noticed the margins and width declared on the parent ul. :blush:

I suggest the width to auto and use percentage margins to add some space to the outer icons. E.g.:

.hbzsocial-icons ul {
    display: flex;
    justify-content: space-around;
    margin: 0 10%;
    padding: 0;
    width: auto;
1 Like
7

Glad to know the extras :grinning:
Thanks for your suggestion

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.