How can I fix this alignment?

时间:2016-04-07 10:28:32

标签: html5 css3 alignment

I have the following code, I would like to remove the space above the social icons, I do not know where is taken from the /div ends before the social icons start.

Something like in this image would be desired result: http://prntscr.com/ap7ai7

<strong><div style="margin-top: 10px;">© 2016 RIESEN-PRINTMEDIA           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;UID-Nummer CHE-356.597.965 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IBAN: CH25 0070 0115 8002 6948 8 ZKB - Zürich</strong></div>

1 个答案:

答案 0 :(得分:1)

You should make the first div float: left if you want them to be in one line with the div containing social icons:

<div style="margin-top: 10px; float: left;">© 2016 RIESEN-PRINTMEDIA (...)

Also you should use CSS margin or padding for making spaces between elements instead of using a lot of &nbsp; entities.

For example, add a CSS class defining style for all footer text elements:

div.footerText {
    padding: 10px 50px 0px;
    float: left;
}

Then change your HTML by closing all texts in seperate DIV's with this new CSS class (and remove the left padding from first one to have it on the left side):

<div class="footerText" style="padding-left:0"><strong>&copy; 2016 RIESEN-PRINTMEDIA</strong></div>
<div class="footerText"><strong>UID-Nummer CHE-356.597.965</strong></div> 
<div class="footerText"><strong>IBAN: CH25 0070 0115 8002 6948 8 ZKB - Zürich</strong></div>

You will get something similar to your current style without overusing &nbsp; entity, and you can easliy manipulate the spaces by modifying padding in CSS class.