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>
精彩评论