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>

我的问题是我希望所有细节都显示在一行上。我希望在一行上看到“欢迎访客！登录或注册”，但现在它全部垂直流动

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>

如何让我的DIV的所有内容出现在一行？

2 个答案: