我试图从左表格单元格和右表格单元格中获取文本以在同一位置对齐。如果这有帮助,我也使用博主。这是我想要的图片
这是我的表格html
<div id="text1">
Motives are extremely important and not taking care of your motives can cause alot of problems.</div>
<br />
<br />
<div id="table1">
<br />
<table border="0" cellpadding="3" cellspacing="3" id="table1" style="background-color: white; border-collapse: collapse; border: 0px solid #FFCC00; color: black; width: 850;">
<tbody>
<tr>
<td height="400px" width="425px">
<div id="title1">
Sims with Bad Motives:</div>
<br />
<div id="text1">
<ul id="list1" style="list-style-type: disc;">
<li>Can cause your work or school performance to suffer</li>
<br />
<li>Can give you a negative moodlet. </li>
<br />
<li>Can cause death</li>
</ul>
</div>
</td>
<td height="400px" width="425px"><div id="title1">
Sims with Good Motives:
</div>
<br />
<div id="text1">
<ul id="list1" style="list-style-type: disc;">
<li>Get promotions fast</li>
<br />
<li>Earn life time rewards from mood bar being high.</li>
<br />
<li>Get to pick two extra traits when a baby is born</li>
<br />
<li>Learn skills faster</li>
</ul>
</div>
</td>
</tr>
</tbody></table>
</div>
这里有任何与之相关的CSS
#title1 {
text-align:center;
text-decoration: underline;
font-weight: bold;
font-size: 20px;
}
#text1 {
font-size: 15px;
text-align: center;
}
#table1 {
text-align: center;
vertical-align: top center;
}
#table1 {
margin-top: -10px;
}
答案 0 :(得分:1)
尽管如此,页面上的元素具有相同的ID&gt; #title1
,#table1
... ID是唯一的。类可以在同一页面上重用。您可以在不同的页面上使用相同的ID,但不能在同一页面上使用具有相同ID的两个元素。
您需要将一种统一性应用于标记,这就是所用的类。您需要为左侧和右侧列设置相同的布局。
这是“修复”:jsfiddle.net/swqza86p
我所做的是将ID转换为类,并使用tr
设置vertical-align: top property
元素。