html / css定位文字/ DIV問題

Question

我在鏈接“標題”中有一些文本，還有一個表單框，我希望文本在左側，而在右側。 但是，每當我嘗試執行此操作時，結果就是文本行，然后表格出現在文本下方。 我希望它們在同一水平線上。

所以我要加點：TEXT .................................在框中

這是代碼：

 <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是一個塊元素，因此將始終這樣做。 您需要通過設置float和display使其成為非阻塞元素。 除了下面的解決方案之外，您還可以使用一張桌子，但這是個皺眉。

 <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 ？ 最簡單的方法是用非塊元素（例如span替換div ，否則請參見float CSS樣式