Выравнивание элементов на одной линии - PullRequest
Новая
       14

Выравнивание элементов на одной линии

3 голосов
/ 23 октября 2009

Я хочу, чтобы ярлыки и текстовое поле отображались в одной строке (ярлык «Поиск товаров: ярлык выше» ярлыка поиска, я хочу, чтобы они были в одной строке), разница незначительная, но она существует, я хочу их точнее.

онлайн-версия: ссылка

Markup: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html lang="en">
    <head>
       <title>Test</title>
    </head>
    <body>
      <div class="panel">
        <div class="displayModes">
           Search for products:          
        </div>
      <div class="searchPanel">
        Search :
        <input name="txtSearch" type="text" id="txtSearch" style="height:14px;" />          
      </div>
   </div>    
 </body>
</html>

CSS: 

.displayModes
{
        float:left;
    padding-left: 2px;  
    text-align: center;
}

.searchPanel
{
    float: right;
    margin-right: 150px;
    text-align: center;
}
.panel
{
font-family: Arial, Verdana, Sans-serif;
font-size: 12px;

    padding-top:10px;
    width:600px;
 }

Ответы [ 3 ]

2 голосов
/ 23 октября 2009

Оберните весь текст в div, чтобы вы могли добавить верхние отступы, чтобы они все выстраивались в одну строку. Всегда указывайте ширину при перемещении. Я считаю, что проще указать плавающие элементы как все левые и имеющие определенную ширину.

Разметка 

 <div class="panel">
    <div class="displayModes">
       Search for products:          
    </div>
    <div class="searchPanel">
        <div style="float:left;width:60px;padding-top:2px;"> 
            Search :
        </div>
        <div style="float:left;width:100px;"> 
            <input name="txtSearch" type="text" id="txtSearch" style="height:14px;" />  
        </div>        
     </div>
  </div>

CSS 

.displayModes
{
    float:left;
    width:200px;
    padding-top:2px;
    padding-left: 2px;  
    text-align: center;
}

.searchPanel
{
    float: left;
    width:200px;
    margin-right: 150px;
    text-align: center;
}

.panel
{
    font-family: Arial, Verdana, Sans-serif;
    font-size: 12px;
    padding-top:10px;
    width:600px;
}

Обновление без дополнительных делителей для центрирования этикетки

Разметка 

<div class="panel">
    <div class="displayModes">
       Search for products:          
    </div>
    <div class="searchPanel">        
        Search :        
        <input name="txtSearch" type="text" id="txtSearch" style="height:14px;"/>                
     </div>
</div>

CSS 

.displayModes
{
    float:left;
    width:200px;
    padding-top:4px;
    padding-left: 2px;  
    text-align: center;
}

.searchPanel
{
    float: left;
    width:200px;
    margin-right: 150px;
    text-align: center;
}

.panel
{
    font-family: Arial, Verdana, Sans-serif;
    font-size: 12px;
    padding-top:10px;
    width:600px;
}
0 голосов
/ 23 октября 2009

просто установите высоту строки div "displayModes" в 20px: 

<div class="panel">
   <div class="displayModes">
      Search for products:          
      </div>
      <div class="searchPanel">
        Search :
        <input name="txtSearch" type="text" id="txtSearch" style="height:14px;" />          
      </div>
</div>

CSS: 

.displayModes{
   float:left;
   padding-left: 2px;  
   text-align: center;
   line-height: 20px;
}

.searchPanel{
   float: right;
   margin-right: 150px;
   text-align: center;
}

.panel{
   font-family: Arial, Verdana, Sans-serif;
   font-size: 12px;
   padding-top:10px;
   width:500px;
 }

Небольшое предложение: у вас есть проблема с переполнением, просто добавьте "более четкий" div, чтобы заставить дочерний div содержаться из "панели": 

<div class="panel">
   <div class="displayModes">
      Search for products:          
      </div>
      <div class="searchPanel">
        Search :
        <input name="txtSearch" type="text" id="txtSearch" style="height:14px;" />          
      </div>
      <div class="clearer"></div>
</div>

CSS: 

.clearer{ clear: both; }

FIX: Высота строки div "displayModes" должна быть 21px! Протестировано на FF 3.5.3 и Safari 4.0.3

0 голосов
/ 23 октября 2009

Я сделал это, добавив некоторые отступы в следующий раздел CSS: 

.displayModes
{
    float:left;
    padding-left: 2px;
    padding-top: 2px;  
    text-align: center;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...