CODEWITHSUNDEEP
htmlcss
mikkuslice
mikkuslice

Reputation: 397

putting <a> and <p> in one line when text is centrally align

heyy guys, i have this problem were i'm putting and

in one line when text is centrally align and it keeps skipping align between each and

this is how it looks like: 

<div id="footercont">
                <a href="#"> A propos de So Home </a><p>I</p>
                <a href="#"> FAQ </a><p>I</p>
                <a href="#"> Contact </a><p>I</p>
                <a href="#"> Parrainage </a><p>I</p>
                <br>
                <a href="#"> Plan du site </a><p>I</p>
                <a href="#"> Conditions générales de vente </a><p>I</p>
                <a href="#"> Données personnelles </a><p>I</p>
                <a href="#"> Parrainage </a>
            </div>

this is how i want it to look like: A propos de So Home I FAQ I Contact I Parrainage Plan du site I Conditions générales de vente I Données personnelles

and this is the css code: 

div#footercont{
    margin: 0;
    width: 980px;
    height: 196px;
    position:relative;
    float:left;
    left: 50%;
    margin-left: -490px;
    background: rgb(248,248,248);
    text-align: center;
}

div#footercont a{
    font-family: Arial;
    font-size: 12px;
    color: rgb(187,189,188);
    text-decoration:none;
    text-align: center;
    padding: 0px 8px 0px 8px;
}

div#footercont p{
    font-family: Arial;
    font-size: 12px;
    color: rgb(187,189,188);
    text-decoration:none;
    text-align: center;
    margin: 0px;
    white-space: nowrap;
}

would really much like to have some help on this matter, thanks!

Upvotes: 1

Views: 61

Answers (2)

Surya Narayan
Surya Narayan

Reputation: 558

If you are using css3 and want separator between each item then remove unwanted paragraph tag and try below css

#footercont a:after {
    content: "|";
    padding-left:8px;
}
#footercont a:last-child:after {
    content: "";
}

Working Demo

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157314

p is a block level element and hence it will take up 100% of horizontal space, so you need to make it display: inline-block; or display: inline;

But am not sure why you need p here, I think you want to target that text separately, so inorder to achieve that, you should consider using span element instead which is also an inline element like a.

Upvotes: 1

Related Questions