How to put an <p> element directly after an <a> element without placing it on a new line

Question

When I was working on my site I walked towards a problem. I want to have the <.p> element directly after my <.a> element, so it is not a line under it.

How it is now:

Login 
\
Register

How I want it:

Login \
Register

You can visit my site if you want to take a look:

v14rkoende.helenparkhurst.net

This is my html code:

<div class=logreg>

        <div class=logregb>

            <p class=loginl ><a href=login.html class=loginr>Login</a> /</p>
            <p class=loginl ><a href=register.html class=loginr>Registreer</a></p>

        </div>

    </div>

This is my CSS code:

.loginr {
    font-family: Century Gothic;
    color: white; 
    font-size: 12px;
    margin-bottom: 0px;
    margin-top: 0px;
    text-decoration: underline;
}

.loginl {
    font-family: Century Gothic;
    color: white; 
    font-size: 12px;
    text-decoration: none;
    margin: 0px;
}

.logreg {
    margin-left:-20px;
}

.logregb {
    width: 0px;
    margin-left: auto ;
    margin-right: auto ;
    margin-top: -40px;
}

Thanks for helping me out

---

Solution was to make the width bigger so for example:

 .logregb {
    width: 100px;
    margin-left: auto ;
    margin-right: auto ;
    margin-top: -40px;
}

Thanks to all people for the fast awnsers!

Answer 1

try this (UNTESTED) :

.loginl a {
 float:left;
}

Answer 2

The width of your parent DOM element is to small. Remove the .logregb {width: 0px;} because it results in 2 line breaks.

Alternatively

Add nowrap to your CSS as following:

.loginl {
    [...]
    white-space: nowrap;
}

Here is the JSFiddle: http://jsfiddle.net/j3t47pqg/1/

Answer 3

 pa { display:inline-block; } 

 <div class=logreg> <div class=logregb> <p class=loginl > <a href=login.html class=loginr>Login</a> <a href=register.html class=loginr>Registreer</a> </p> </div> </div>