Question

我在链接“标题”中有一些文字，还有一个表格框，我希望左边的文字和右边的表格。然而，每当我尝试这样做时，出现的是文本行，然后表单出现在文本下面。我希望他们在同一条水平线上。

所以我想要点：TEXT ................................. SIGN IN BOX

这是代码：

 <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等非块元素替换span ...否则请参阅float css style

html / css定位文本/ DIV问题

2 个答案: