как показать DIV элементов в одной строке

Question

У меня есть проблема в моем Div элементов я не могу показать их в одной строке:

<div> 
<table> 
    <tr> 
    <td>hellow world</td> 
    </tr> 
</table> 
<ul> 
    <li>hi world</li> 
</ul> 
</div> 

таблица показано выше ул, и я хочу, буксирные элементы показаны в одной строке рядом друг с другом. я пытался использовать:

div 
{ 
    display:inline; 
} 

или:

div 
{ 
    display:block; 
} 

Но это не сработало. любой орган может мне помочь на этом?

Answer 1

Если вы хотите показать table и ul бок о бок, это два элемента, на которые вы должны нацелиться, а не на контейнер, который они совершают чтобы быть в.

Если они имеют одинаковую высоту, просто писать

table {float:left; margin-right:40px} 

будет делать трюк. (Вы будете нуждаться в запасе, потому что списки также работать с полями, чтобы показать пули, и пуля будет в конечном итоге в таблице, если вы не предоставили для этого.)

См fiddle

Если стол будет выше, вы также должны очистить поплавок потом, иначе последующее содержание может также оказаться в правой части таблицы:

div::after {content:''; display:block; clear:both} 

См updated fiddle

Answer 2

Вы можете применить display:inline-block, но ключ убедившись, что вы примените его к правильным элементам ...

table, ul 
{ 
    display:inline-block; 
} 

Here is a working example

Answer 3

Поплавок ваше содержание:

div 
{ 
    float: left; 
} 

Answer 4

вы можете просто использовать table,ul{display: inline-block;}demo

Answer 5

Попробуйте

<div> 
    <table style="float: left;"> 
     <tr> 
      <td width="100"> 
       hellow world 
      </td> 
     </tr> 
    </table> <ul> 
     <li>hi world</li> 
    </ul> 
</div>