Question

我有这个HTML代码

<ul id="list-table">
    <li>
        <table id="test-tab">...</table>
        <ul id="panel-table">...</ul>
    </li>
</ul>

我希望表格“test-tab”和li里面的“panel-table”显示水平，如http://img.photobucket.com/albums/v246/TuanVenus/table-css.png

Answer 1

我建议使用float: left。通常，我会使用display: inline-block，但这可能会破坏表格布局。不要忘记添加一个伪元素，为父元素（<li>）提供 clear-fix 。

#test-tab, #panel-table {
    float: left;
}
#list-table li::after {
    content: "";
    display: block;
    clear: both;
}

Answer 2

像这样给你的元素浮动：

<强> CSS

.fleft { float:left;}

<强> HTML

<table id="test-tab" class="fleft">...</table>
<ul id="panel-table" class="fleft">...</ul>

Answer 3

只需向CSS添加与http://jsfiddle.net/vMe5L/38/享受!!

相同的样式

Answer 4

你可以使用显示并将你的表包装在一个div中，所以它不会被破坏： http://codepen.io/anon/pen/tjesx/

#list-table {
  display:table;
  width:600px;
  border:solid;
  border-spacing:1em;
  padding:0;
}
#list-table > li {
  display:table-row;
}

#list-table > li > ul ,
#list-table > li > div
{
  display:table-cell;
  border:solid;
  margin:0;
}

Answer 5

试试这个，

<style>
#test-tab{
    float:left;
}

#panel-table{
    float:left;
}

</style>

<ul id="list-table">
    <li>
        <table id="test-tab"><tr><td>example table</td></tr></table>
        <ul id="panel-table"><li>example li</li></ul>
    </li>
</ul>

Answer 6

尝试添加css样式

<ul id="list-table" style="list-style: none;">

css如何对齐<li> </li>中的水平元素

6 个答案: