Css 如何使按钮水平排列？
我对当前设计的CSS有问题。我几乎把一切都完成了。但是，在最终产品中，我注意到视图参与按钮与其他视图参与按钮不对齐。它们看起来上下起伏。所有的数据都应该对齐。我调整了周围的桌子/盒子，通过将高度固定在150px，使它们对齐。有人能看到我代码中的错误并指出如何修复这一部分吗？我在下面的图片中看到了它的样子： 下面是我的代码示例：Css 如何使按钮水平排列？,css,Css,我对当前设计的CSS有问题。我几乎把一切都完成了。但是，在最终产品中，我注意到视图参与按钮与其他视图参与按钮不对齐。它们看起来上下起伏。所有的数据都应该对齐。我调整了周围的桌子/盒子，通过将高度固定在150px，使它们对齐。有人能看到我代码中的错误并指出如何修复这一部分吗？我在下面的图片中看到了它的样子： 下面是我的代码示例： <table width="328" border="0" cellspacing="0" cellpadding="0" align="right" style=
<table width="328" border="0" cellspacing="0" cellpadding="0" align="right" style="width:328px;" class="em_wrapper">
<tbody>
<tr>
<td align="center" valign="top" class="em_ptop">
<table width="328" border="0" cellspacing="0" cellpadding="0" align="center" style="width:328px;" class="em_w300">
<tbody>
<tr>
<td align="center" valign="top">
<table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tbody>
<tr>
<td align="center" valign="top" style="border: solid 2px #9e9f9f;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper">
<tbody>
<tr>
<td align="center" valign="top" bgcolor="#9E9F9F" style="background-color:#9e9f9f; color:#fff;">
Feature Presenter 3
<table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper"></table>
</td>
</tr>
<tr>
<td height="189" align="center" valign="bottom" style="height:189px;">
<img src="./TREATMENT OPTIONS FOR ADVANCED BREAST CANCER_files/oshughnessy-joyce-800.png" width="145" alt="" height="153" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:153px;" class="em_g_img" border="0">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4D4D4D" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
<table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;height:150px" class="em_wrapper">
<tbody>
<tr>
<td align="center" valign="top" style="padding:0px 10px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px;">
<span style="font-weight:bold;">Joyce O’Shaughnessy</span><br>
Baylor University Medical Center
</td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;">
<table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tbody>
<tr>
<td align="center" valign="top" bgcolor="#007F3D" style="border-radius:5px;">
<table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tbody>
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold;">
<a target="_blank" href="http://localhost:8038/single-event/zone-t-minnesota?section=3" style="text-decoration:none; color:#ffffff; display:block; line-height:16px;">View
Participation<br>
Options
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
如果需要，我也可以添加CSS样式，但我认为我拥有的内联CSS需要调整/修改/添加。我一开始就完全抛弃了基于表格的布局，这简化了HTML。然后我去掉了内联样式，这进一步简化了事情 所以我们有一个列表，顺序不重要，所以让我们使用一个无序列表 关于如何布置列表元素，您有很多选项，为了简单起见，我选择了display:block。你也可以看看，甚至 为了将按钮与底部对齐，我创建了一个具有固定高度的元素，将其设置为position:relative。然后，我将position:absolute应用于button元素，并设置相对于父元素底部的位置 .主持人{ 列表样式：无； 填充：0； } .演讲者{ 显示：内联块； 右边距：10px； 宽度：158px； 背景色：4D； 颜色：FFF； 边界半径：0 0 5px 5px； 垂直对齐：顶部； 溢出：隐藏； } .presenter imgContainer{ 背景色：FFF； 边框：实心2px9e9f9f； } .演讲者img{ 显示：块； 宽度：155px； } .主持人头衔{ 背景色：9E9F9F； 字体大小：16px； 字体大小：400； 文本对齐：居中； 宽度：155px； 保证金：0； } .演示者内容{ /*设置合理的固定高度*/ 高度：80px； /*在底部垫上留出足够的空间 对于action元素 */ 填充：8px 10px 70px； /*我们想发布action元素 相对于此 */ 位置：相对位置； 字体系列：“Roboto”，Arial，无衬线； 字体大小：14px； 线高：17px； 文本对齐：居中； } .演示者姓名{ 字体大小：粗体； } .演讲者行动{ 背景色：007F3D； 显示：块； 填充：10px 5px； 文字装饰：无； 颜色：白色； 边界半径：5px； /*把按钮放在底部*/ 位置：绝对位置； 底部：10px； 宽度：calc100%-30px； } 功能演示者2 丹尼斯鲑鱼 加州大学洛杉矶分校医疗中心 功能演示者3 乔伊斯·奥肖内西 贝勒大学医学中心
你能发布一个完整的代码示例吗？您发布的HTML不完整，不允许我们查看您的全部代码。嗨，Adam H。您要的是CSS代码吗？如果是这样，我只是把CSS放在上面。我可以添加更多的HTML，如果你喜欢。请让我知道这不会解决您的问题，但是。。。不要将HTML表格用于布局。嵌套表的深度至少为3。这很糟糕。有关不应使用表的原因，请参阅以下内容：。另外，请只包含足够的代码来复制问题。看看你的CSS，有很多看起来都与此无关。
<table width="328" border="0" cellspacing="0" cellpadding="0" align="right" style="width:328px;" class="em_wrapper">
<tbody>
<tr>
<td align="center" valign="top" class="em_ptop">
<table width="328" border="0" cellspacing="0" cellpadding="0" align="center" style="width:328px;" class="em_w300">
<tbody>
<tr>
<td align="center" valign="top">
<table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tbody>
<tr>
<td align="center" valign="top" style="border: solid 2px #9e9f9f;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper">
<tbody>
<tr>
<td align="center" valign="top" bgcolor="#9E9F9F" style="background-color:#9e9f9f; color:#fff;">
Feature Presenter 3
<table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper"></table>
</td>
</tr>
<tr>
<td height="189" align="center" valign="bottom" style="height:189px;">
<img src="./TREATMENT OPTIONS FOR ADVANCED BREAST CANCER_files/oshughnessy-joyce-800.png" width="145" alt="" height="153" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:153px;" class="em_g_img" border="0">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4D4D4D" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
<table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;height:150px" class="em_wrapper">
<tbody>
<tr>
<td align="center" valign="top" style="padding:0px 10px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px;">
<span style="font-weight:bold;">Joyce O’Shaughnessy</span><br>
Baylor University Medical Center
</td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;">
<table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tbody>
<tr>
<td align="center" valign="top" bgcolor="#007F3D" style="border-radius:5px;">
<table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tbody>
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold;">
<a target="_blank" href="http://localhost:8038/single-event/zone-t-minnesota?section=3" style="text-decoration:none; color:#ffffff; display:block; line-height:16px;">View
Participation<br>
Options
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>