td内的不同元素水平对齐

时间:2015-03-03 21:24:42

标签: html css html-table

我有两个图像,链接和一个td元素内的两个ul,是否有任何方法可以内联它们? http://jsfiddle.net/akeo4zmw/

<table>
    <tr>
        <td id="menu"><div>
            <img src="imgs/logo_03.jpg" /></div>
            <div>
                <ul id="leftsidemenu">
                    <li>Woman</li>
                    <li>Men</li>
                    <li>Kids</li>
                    <li>Coming Soon</li>
                    <li>About</li>
                </ul>
            </div>
            <div>
                <ul id="rightsidemenu">
                    <li>Log In</li>
                    <li>Basket</li>
                </ul>
            </div>
            <div>
                <a href="https://www.google.ru/webhp?tab=ww&ei=b0nuVK3LEoeiyAO7yYC4Bg&ved=0CAYQ1S4"><img src="imgs/images/images/search_05.jpg" /></a>
            </div>
        </td>
    </tr>
</table>

1 个答案:

答案 0 :(得分:2)

只需向所有div元素留下浮动。

&#13;
&#13;
body {
  background-color: #e5e5e5;
}
table {
  border: 1px solid;
  border-spacing: 0;
  background-color: #ffffff
}
table td {
  vertical-align: top;
}
#leftsidemenu li,
#rightsidemenu li {
  display: inline;
}
div {
  display: inline;
  float: left;
}
&#13;
<table>
  <tr>
    <td id="menu">
      <div>
        <img src="imgs/logo_03.jpg" />
      </div>
      <div>
        <ul id="leftsidemenu">
          <li>Woman</li>
          <li>Men</li>
          <li>Kids</li>
          <li>Coming Soon</li>
          <li>About</li>
        </ul>
      </div>
      <div>
        <ul id="rightsidemenu">
          <li>Log In</li>
          <li>Basket</li>
        </ul>
      </div>
      <div>
        <a href="https://www.google.ru/webhp?tab=ww&ei=b0nuVK3LEoeiyAO7yYC4Bg&ved=0CAYQ1S4">
          <img src="imgs/images/images/search_05.jpg" />
        </a>
      </div>
    </td>
  </tr>
</table>
&#13;
&#13;
&#13;