如何讓我的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> 

我的問題是，我想所有的細節出現在同一行。我想看到「歡迎觀衆登錄或註冊！」在同一行，但現在這一切垂直流道

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>