Question

我希望<img>和Test左对齐，但它们不是。

我的代码：

<center>
  <div class="body" id="block">
    <span style="width:95%;background-color: rgb(247,247,247);border-radius:10px;display:block;">
      <table>
        <tr style="height:25px;">
          <td style="width:70%;margin-left:10px;font-size:20px;text-align:left;display:block;">
            <img style="height:20px;" src="http://i64.tinypic.com/2i9qzj5.png">
            Test
          </td>
          <td style="font-size:12px;">
            Another test
          </td>
          <td style="width:5%;">
          </td>
          <td style="width:15%;font-size:12px;">
            Third test
          </td>
        </tr>
      </table>
    </span>
  </div>
</center>

我尝试了几件事，但仍然无效。我不明白我在这里做错了什么。

Answer 1

删除display:block代码的CSS <td>：

<td style="width:70%;margin-left:10px;font-size:20px;text-align:left;display:block;">

新代码：

<td style="width:70%;margin-left:10px;font-size:20px;text-align:left;">

默认情况下，表格中的<td>包含CSS：display: table-cell;

真实回答：

 table { width: 100%; }

Answer 2

它仍然搞砸了，但我不会清理代码。

＆＃13;

<center>
  <div class="body" id="block">
    <div style="width:95%;background-color: rgb(247,247,247);border-radius:10px;">
      <table style="width: 100%">
        <tr style="height:25px;">
          <td style="width:70%;padding-left: 10px;font-size:20px;text-align:left;">
            <img style="height:20px;" src="http://i64.tinypic.com/2i9qzj5.png">
            Test
          </td>
          <td style="font-size:12px;">
            Another test
          </td>
          <td style="width:5%;">
          </td>
          <td style="width:15%;font-size:12px;">
            Third test
          </td>
        </tr>
      </table>
    </div>
  </div>
</center>

＆＃13;

Answer 3

嘿，这是我的第一篇文章，但我希望我可以帮助你解答。我从你的html中删除了css，并且还改用了div，我建议你这样做。

HTML：

<center>
  <div class="body" id="block">

     <div class="user item">
       <img src="http://i64.tinypic.com/2i9qzj5.png">
       Test
     </div>
     <div class="title item">
       Another Test
     </div>
     <div class="third item">
       Third test
     </div>

  </div>
</center>

CSS：

.body {
  width:100%;
  height:25px;
  background-color: rgb(247,247,247);
  border-radius:10px;
  display:block;
}

.item {
  width:20%;
  display:inline-block;
}

.user {
  float:left;
  font-size:20px;
}

.user img {
  height:20px;
}

.title {
  font-size:12px;
}

.third {
}

.td4 {
  font-size:12px;
}

JSFiddle

表的内容未左对齐

3 个答案: