Question

I have the following:

        <ul class="right">
            <li>
                <div class="hdr_msg">Welcome Visitor!</div>
                @Html.ActionLink("Login", "Login", "Users", null, new {
                    title = "Login", 
                    rel = "nofollow" 
                })<div class="hdr_msg"> or </div>
                @Html.ActionLink("Register", "Register", "Users", null, new {
                    title = "Register your ID", 
                    rel = "nofollow" 
                })
            </li>
        </ul>

which makes the following source code:

        <ul class="right">
            <li style="float: left">
                <div class="hdr_msg">Welcome Visitor!</div>

                <a href="/Users/Login" rel="nofollow" title="Login">Login</a><div class="hdr_msg"> or </div>
                <a href="/Users/Register" rel="nofollow" title="Register your ID">Register</a>
            </li>
        </ul>

My problem is that I want all of the details to appear on one line. I would like to see “Welcome Visitor! Login or Register” on one line but now it all flows vertically dow

Answer 1

You could use <span> instead of <div>:

<li>
    <span class="hdr_msg">Welcome Visitor!</span>
    @Html.ActionLink("Login", "Login", "Users", null, new {
        title = "Login", 
        rel = "nofollow" 
    })
    <span class="hdr_msg"> or </span>
    @Html.ActionLink("Register", "Register", "Users", null, new {
        title = "Register your ID", 
        rel = "nofollow" 
    })
</li>

Another possibility is to keep the divs but in your CSS files to apply them the inline display rule:

.hdr_msg {
    display: inline;
}