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.topnav появилось слева от a? Проще всего было бы заменить div неблокированным элементом, таким как span ... в противном случае см. float css style

Answer 2

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;
}