1. дома
  2. Вопрос и ответ
  3. Сделать начало таблицы в той же строке, что и заголовок

Сделать начало таблицы в той же строке, что и заголовок

2010-05-01 3 views
1

Я пытаюсь получить таблицу значков в той же строке, что и заголовок.Сделать начало таблицы в той же строке, что и заголовок

В приведенном ниже HTML значки отображаются на отдельной строке.

Я попытался использовать атрибут 'top', чтобы переместить таблицу, но это не очень хорошее решение, потому что между таблицей значков и остальной частью документа есть уродливое пространство. Как я могу это исправить?

alt text http://img541.imageshack.us/img541/9677/tableu.png

<html> 
<head> 
<style type="text/css"> 
#action-icons 
{ 
    float:right; 
    position:relative; 
    border:0; 
} 
</style> 
</head> 
<body> 
    <h1 class="edit">Bla bla</h1> 

    <table id="action-icons"> 
     <tbody> 
      <tr> 
       <td><img width="64" height="64"/></td> 
       <td><img width="60" height="60"/></td> 
      </tr> 
      <tr> 
       <td><img width="36" height="36"/></td> 
       <td><img width="36" height="36"/></td> 
      </tr> 
     </tbody> 
    </table> 

    <table width="100%" class="tasksgrid"> 
     <tbody> 
      <tr> 
       <th class='taskcell'>One</th> 
       <th class='taskcell'>Two</th> 
      </tr> 
     </tbody> 
    </table> 
</body> 
</html>

источник

2010-05-01 ripper234

+0

Можете ли вы объяснить более или предоставить снимок экрана? Я не совсем понимаю. –

+0

@Pekka - добавлен снимок экрана. – ripper234

ответ

1

Помещенные DIV вокруг него:

<html> 
<head> 
<style type="text/css"> 
#action-icons 
{ 
    float:right; 
    position:relative; 
    border:0; 
} 
.float_left { 
     float:left; 
} 
</style> 
</head> 
<body> 
    <div class="float_left"> 
     <h1 class="edit">Bla bla</h1> 
    </div> 

    <div class="float_left"> 
     <table id="action-icons"> 
      <tbody> 
       <tr> 
        <td><img width="64" height="64"/></td> 
        <td><img width="60" height="60"/></td> 
       </tr> 
       <tr> 
        <td><img width="36" height="36"/></td> 
        <td><img width="36" height="36"/></td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 

    <div class="float_left"> 
     <table width="100%" class="tasksgrid"> 
      <tbody> 
       <tr> 
        <th class='taskcell'>One</th> 
        <th class='taskcell'>Two</th> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</body> 
</html>

источник

2010-05-02 21:45:04

+0

Это выглядит хорошо :) Я просто изменил «float_left» на «float_right» в таблице значков действий. – ripper234

Смежные вопросы

 Смежные вопросы