html/css定位文本/ DIV問題

Question

我在鏈接「標題」和一個表單框中有一些文本，我希望左側的文本和右側的表單。然而，每當我嘗試做到這一點時，出現的是文本行，然後窗體出現在文本之下。我希望他們在同一水平線上。

所以我想用點：文字.................................簽入框

這裏是代碼：

<div id="container"> 

<a href="index.php"><font size="6">Title</font><a> 

<div id="topnav" class="topnav"> Have an account? <a href="login" class="signin"> 
<span>Sign in</span></a> </div> 

<fieldset id="signin_menu"> 
<form method="post" id="signin"> 
<p> 
    <label for="username">Username or email</label> 
    <input id="username" name="username" value="" title="username" tabindex="4" type="text"> 
    </p> 
    </form> 
    </fieldset> 
</div> 

這裏是容器中的CSS：

#container { 
margin:0 auto; 
position:relative; 
width:780px; 
} 

和topnav

#topnav { 
font-size:11px; 
line-height:23px; 
padding:10px 0 12px; 
text-align:right; 
} 

我該如何完成任務？謝謝

Answer 1

DIV是一個塊元素，所以將永遠這樣做。您需要通過設置浮點和顯示來使其成爲非塊元素。 除了下面的解決方案，你可以使用一個表，但這是皺起了眉頭。

<div id="container"> 

    <div class="titleDiv"><a href="index.php"><font size="6">Title</font><a></div> 

    <div id="topnav" class="topnav"> Have an account? <a href="login" class="signin"> 
<span>Sign in</span></a> 

<fieldset id="signin_menu"> 
<form method="post" id="signin"> 
<p> 
    <label for="username">Username or email</label> 
    <input id="username" name="username" value="" title="username" tabindex="4" type="text"> 
    </p> 
    </form> 
    </fieldset></div> 
</div> 

然後設置你的CSS這樣的：

#topnav { 
font-size:11px; 
line-height:23px; 
padding:10px 0 12px; 
text-align:right; 
float:left; display:inline; 
} 

.titleDiv 
{ 
    float:left; display:inline; 
} 

Answer 2

所以要div.topnav出現在a左邊？最簡單的方法就是用等非塊元素替換div ...否則請參閱float css樣式