Как сделать так, чтобы все содержимое моего DIV отображалось в одной строке?

Question

У меня есть следующее:

        <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>

, что делает следующий исходный код:

        <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>

Моя проблема в том, что я хочу, чтобы все детали отображались в одной строкеЯ хотел бы видеть «Добро пожаловать, посетитель! Войти или Зарегистрироваться» в одной строке, но теперь все идет вертикально dow

Answer 1

Вы можете использовать <span> вместо <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>

Другая возможность состоит в том, чтобы сохранить div, но в ваших CSS-файлах применить их к правилу отображения inline:

.hdr_msg {
    display: inline;
}

Answer 2

Я бы обернул <span> вокруг всего текста. Не используйте один <span>, чтобы вставить or между логином и регистрацией.

Вот мое предложение:

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