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样式