在任何浏览器上使用 CSS 'padding-left'对齐 P、UL 和 TABLE

在下面的html（带有嵌入式css）中，"Line"，"Title"和"Cell"中的Ls，Ts和Cs在与Google Chrome，Firefox和Safari显示时对齐。

它们在使用 Internet Explorer 显示时不对齐。在IE上，Ts比其他的缩进得更远。

如何在任何浏览器下修改三行 css 以使三个部分对齐？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta charset=UTF-8>
<title>My Title</title>
<style type="text/css"><!-- 
body       { margin-left:   3em; }
p,ul,table { padding-left:  5em; }
 --></style>
</head>
<body>
<h2>Heading One</h2>
<p>
    Line 1<br />
    Line 2<br />
</p>
<h2>Heading Two</h2>
<p>
    <ul>
        <li>
            <b>Title C</b>
            <ul><li>Item C1</li><li>Item C2</li></ul>
        </li>
        <li>
            <b>Title D</b>
            <ul><li>Item D1</li><li>Item D2</li></ul>
        </li>
    </ul>
</p>
<h2>Heading Three</h2>
<p>
    <table>
        <tr><td>Cell 1</td></tr>
        <tr><td>Cell 2</td></tr>
    </table>
</p>
</body>
</html>

您只需要使用重置样式表即可确保所有浏览器都以相同的样式开始。或者至少只是添加

* { margin:0;padding:0;}

然后，您将需要指定一些顶部和底部填充，但它将消除您的问题。

相关内容

最新更新

热门标签：