CODEWITHSUNDEEP
htmlcsscss-floattext-alignment
ChosenJuan
ChosenJuan

Reputation: 961

How to align a <p> tag next to an <a> tag link without spacing issues

I've been having trouble aligning the terms of service and privacy policy message under the signup button of my page.

http://jsfiddle.net/jyfvLrb3/

HTML:

<div class="signupterms"> <p>By clicking the sign up button you agree that you read the site's</p> <span><a href="terms.html">Terms of service</a></span><a href="privacy.html">Privacy Policy</a><p>and</p><a href="cookies.html">Cookie use</a>  
</div>

CSS:

 .signupterms {text-align:left; float:left; display:inline-block;}

.signupterms a {float:left; text-decoration:none; color:#000; }

.signupterms p {float:left; margin-left:4px;}

I've tried floating all the elements left, display:inline-block, but nothing seems to align the words perfectly, especially when resizing the browser window. It's probably something very obvious to fix, but I'm sure you guys can point me in the right direction and help me fix this problem. Thanks!

Upvotes: 0

Views: 2860

Answers (4)

EaziLuizi
EaziLuizi

Reputation: 1615

the <p> tag has display block by default and a margin... just use one for the first statement and then spans to seperate links like so:

.signupterms {
    text-align:left;
    display:inline-block;
}
.signupterms a {
    text-decoration:none;
    color:#000;
}
.signupterms span {
    margin-left:4px;
    display:inline-block;
}
<div class="signupterms">
    <p>By clicking the sign up button you agree that you read the site's</p> <span><a href="terms.html">Terms of service</a></span>,<span><a href="privacy.html">Privacy Policy</a></span>&nbsp;and&nbsp;<span><a href="cookies.html">Cookie use</a></span> 
</div>

fiddle

Upvotes: 0

Andy Furniss
Andy Furniss

Reputation: 3914

Your <p> tags have margins which is making the text appear out of line with the anchor tags.

To be honest, I'd just put the links inside the the <p> tag like below and then you don't need to worry about removing the margin from the <p> tags.

.signupterms {text-align:left; float:left; display:inline-block;}

.signupterms a {text-decoration:none; color:#000; }
<div class="signupterms">
    <p>
        By clicking the sign up button you agree that you read the site's <a href="terms.html">Terms of service</a> <a href="privacy.html">Privacy Policy</a> and <a href="cookies.html">Cookie use</a>
    </p>
</div>

Upvotes: 1

Felix A J
Felix A J

Reputation: 6470

p tag have a default margin. Remove it by adding margin:0; to p.

.signupterms p {float:left; margin-left:4px; margin:0;}

Upvotes: 0

Pepo_rasta
Pepo_rasta

Reputation: 2900

how about using <span> ?

http://jsfiddle.net/jyfvLrb3/1/

<p> is a block element with some predefined styles, therefore its much better to use some inline without any properties, like <span>

Upvotes: 0

Related Questions