CSS定位困難

CSS：CSS定位困難

.one { 
    width: 13%; 
} 

.two { 
    width: 30%; 
} 

.three { 
    width: 30%; 
}

HTML：

<table> 
    <tr> 
     <th class= "one">Quantity</th> 
     <th class= "two">Info</th> 
     <th class= "three">Price</th> 
    </tr> 
    <tr> 
     <td class = "one"><input type="text" name="quantity1" value=""/> 
     <td class = "two">Cheap Monday Jeans 30/34 </td> 
     <td class = "three">$39.99 </td> 
    </tr> 
    <tr> 
     <td class = "one"><input type="text" name="quantity2" value=""/></td> 
     <td class = "two">Herschel Bag (free) </td> 
     <td class = "three">$129.99 </td> 
    </tr> 
    <tr> 
     <td class = "one"><input type="text" name="quantity3" value=""/></td> 
     <td class = "two">Diesel t-shirt (s) </td> 
     <td class = "three">$59.99 </td> 
    </tr> 
    <tr> 
     <td class = "one"><input type="text" name="quantity4" value=""/></td> 
     <td class = "two">Superdry Patrol Lite Jacket (m) </td> 
     <td class = "three">$129.99 </td> 
    </tr> 
    <tr> 
     <td class = "one"><input type="text" name="quantity5" value=""/></td> 
     <td class = "two">I love Canada t-shirt (s) </td> 
     <td class = "three">$19.99 </td> 
    </tr> 
</table>

我想錶行（衣物信息&價格）正下方的表頭對齊。意思是，我希望它被集中。我不知道爲什麼表格行向左傾斜，不能在頁眉正下方對齊。

偶試過 td {text-align：center; }，但不起作用。

幫助將不勝感激，謝謝。

enter image description here

來源

2013-08-01 Fred

請[編輯]（http://stackoverflow.com/posts/17983973/edit）你的前一個問題，而不是重新發布它。同時向我們展示如何嘗試「文本對齊」以及爲什麼無法使用。 – Bergi

這裏的作品很好http://jsfiddle.net/u7WzM/ –

的問題是，你想要的東西，左對齊排隊對準東西中心的下方。你最好的選擇可能是左對齊標題，並使用一些填充來在列之間提供空格。

HTML：

<table> 
<tr> 
    <th class= "one">Quantity</th> 
    <th class= "two">Info</th> 
    <th class= "three">Prices</th> 
</tr> 
<tr> 
    <td class = "one"><input type="text" name="quantity1" value=""/></td> 
    <td class = "two">Cheap Monday Jeans 30/34 </td> 
    <td class = "three">$39.99 </td> 
</tr> 
<tr> 
    <td class = "one"><input type="text" name="quantity2" value=""/></td> 
    <td class = "two">Herschel Bag (free) </td> 
    <td class = "three">$129.99 </td> 
</tr> 
<tr> 
    <td class = "one"><input type="text" name="quantity3" value=""/></td> 
    <td class = "two">Diesel t-shirt (s) </td> 
    <td class = "three">$59.99 </td> 
</tr> 
<tr> 
    <td class = "one"><input type="text" name="quantity4" value=""/></td> 
    <td class = "two">Superdry Patrol Lite Jacket (m) </td> 
    <td class = "three">$129.99 </td> 
</tr> 
<tr> 
    <td class = "one"><input type="text" name="quantity5" value=""/></td> 
    <td class = "two">I love Canada t-shirt (s) </td> 
    <td class = "three">$19.99 </td> 
</tr> 
</table>

和CSS：

.one { 
    width: 13%; 
} 

.two { 
    width: 30%; 
} 

.three { 
    width: 30%; 
} 
th { 
    text-align: left; 
} 
.two, .three { 
    padding-left: 10%; 
}

例如：http://jsfiddle.net/cpmmk/

enter image description here

來源

2013-08-01 02:32:14

左對齊th標頭元素。您也可以對齊td元素，但看起來不太漂亮。

th.one { 
    text-align:left; 
} 
th.two { 
    text-align:left; 
} 
th.three { 
    text-align:left; 
} 
.one { 
    width: 13%; 
} 

.two { 
    width: 30%; 
} 

.three { 
    width: 30%; 
}

來源

2013-08-01 02:33:41 Ceres

他希望他們居中。 – teynon

你應該做的<th>元素左對齊：

th { 
    text-align:left; 
}

此外，你應該考慮使用<colgroup>標籤，嵌套<col>標籤風格你的表列，如這樣的：

<table> 
    <colgroup> 
     <col class="one" /> 
     <col class="two" /> 
     <col class="three" /> 
    </colgroup> 
    <tr> 
     <th>Quantity</th> 
     <th>Info</th> 
     <th>Price</th> 
    </tr> 
    <tr> 
     <td><input type="text" name="quantity1" value=""/> 
     <td>Cheap Monday Jeans 30/34 </td> 
     <td>$39.99 </td> 
    </tr> 
    ...rest of the code

這樣，您不必將「class」屬性添加到ALLLLL <td> s。

來源

2013-08-01 02:45:12 Churro

嘿看到這個演示希望它爲你工作

link
這些只是你在你的CSS做部分的變化：

.one { 
    width: 1%; 
    text-align:center; 
    } 

.two { 
    width: 10%; 
    text-align:center; 
    } 

.three { 
    width: 10%; 
    text-align:center; 
     }

，我得到的輸出像這：

我希望這是你想要的。

來源

2013-08-01 03:51:23

這就是你想要的嗎？DEMO http://jsfiddle.net/yeyene/u7WzM/2/

右對齊，居中。

th.one, td.one { 
    text-align:center; 
} 
th.two { 
    text-align:center; 
} 
td.two { 
    text-align:right; 
    padding-right:5%; 
} 
th.three, td.three { 
    text-align:center; 
} 
.one { 
    width: 13%; 
} 

.two { 
    width: 30%; 
} 

.three { 
    width: 30%; 
}

來源

2013-08-01 03:56:12 yeyene

將text-align:center;添加到css類。

.one { 
    width: 13%; 
    text-align:center; 
} 

.two { 
    width: 30%; 
    text-align:center; 
} 

.three { 
    width: 30%; 
    text-align:center; 
}

或者添加

td 
{ 
    text-align:center; 
}

來源

2013-08-01 04:06:44 Bharadwaj

回答

相關問題