简单的HTML出来了吗?

问题描述 投票:2回答:6

我不能为我的生活弄清楚为什么我的桌子会这样。图像和文字应排成一行:

alt text

HTML:

<div id="items">
  <div class="category"><h1>Apparel</h1></div>
  <div class="list-product">
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td width="50" align="center" style="padding-right: 5px;">
        <img height="30" src="/images/products/none.jpg" />
      </td>
      <td>
        <img style="padding: 0 3px 0 0;" src="/images/icons/flag_red.png" />
      </td>
      <td valign="middle">
        <strong>Test Product</strong><br />
        <span style="color: #777;">This has a short description.</span>
      </td>
    </tr>
  </table>
  </div>
  ... and the other table here
</div>

CSS:

div#items
{
width: 400px;
}

div.category
{
padding: 7px 13px;
background: #f0f0f0;
color: #101010;
font-size: 20px;
border-bottom: 1px solid #d0d0d0;
}

.list-product
{
border-bottom: 1px solid #ddd;
font-size: 12px;
padding: 10px;
}
html css xhtml
6个回答
4
投票

要添加到Pete的答案,并使用CSS而不是内联表示标记,您可能需要尝试将vertical-align: middle添加到表格单元格的css中。

作为事后的想法,你可能想要为包含图像的单元格添加一个line-height: 100px(或者你的图像有多高,加上一点填充),并指定line-height: 50px(图像单元格的50%线高)对于包含描述性文本的单元格,我不确定它是否有效,但是当vertical-align没有时,它有时适用于居中文本。


1
投票

可能想在TD标签上试一试。 valign =“中间”为他们所有人。


1
投票

尝试暂时向表格添加边框,以便您可以看到图像和文本在各自的tds中对齐的位置。此外,您是否需要使用span作为描述文本?


1
投票

什么浏览器?我复制粘贴你的HTML(添加了html和body标签),并复制粘贴你的CSS(添加了头部和样式标签),垂直对齐是准确的 - 与图片中的问题不符。

尝试为各种元素添加边框,看看是否能揭示疯狂。并确保您的代码与此处粘贴的代码之间没有拼写错误。


1
投票

你在使用CSS重置文件吗?对我来说这看起来像CSS一样。也许行高?

我不确定它是否重要,但我会从使用break和span切换到使用标题和段落标签,然后再设置样式。

  <td valign="middle">
    <h2>Test Product</h2>
    <p>This has a short description.</p>
  </td>

0
投票

为表和每个td标记使用固定宽度。您将表格的宽度设置为100%,并在第一个标签上设置固定宽度。第二和第三td标签基于td标签内的内容进行调整,以填充表标签上的100%宽度。

© www.soinside.com 2019 - 2024. All rights reserved.