表的內容左對齊

我希望<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>

我已經試過幾件事情，但仍然無法正常工作。我不明白我在這裏做錯了什麼。

來源

2016-04-30 Björn Schönrock

第一件事，不使用跨度表標籤。當我檢查你的代碼表正確顯示在中心。 – ankit

我想img和「測試」左對齊 –

刪除CSS display:block<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%; }

來源

2016-04-30 18:05:17

img和'測試'仍然在中心，我希望他們離開。 –

我看到他們離開了。或者我沒有看到你的選擇。你能解釋一下細節嗎？ –

http://taigacraft.eu/forum/?category=1 –

-1

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

<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>

來源

2016-04-30 18:13:18 SEUH

img和'test'仍然居中，我希望他們離開。 –

-1

嘿，這是我的第一篇文章，但我希望我可以幫助你對我的回答。我從你的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

來源

2016-04-30 18:27:07

如果我想使用div，我會在這裏使用它們。 –

表的內容左對齊

回答

相關問題