开发者

How can I make all of the contents of my DIV appear on one line?

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


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


I would go with a wrapping <span> around the whole text. Dont use one <span> to inster just the or between Login and Register.

Heres my suggestion:

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜