css - 无法执行 padding-left - div 两行问题

Question

提供下面的代码链接

http://jsfiddle.net/4uw2o9s3/1/

我想在 div #siteTitle content "line1"的左侧添加 5px 的填充。但是，如果我在 div #siteTitle 下有 padding-left css 规则，则两个内部 div #siteTitle 和“#quickNav”将分成两条不同的行。我希望内容 line1 和 line2 在同一行中，将 5px 的 padding-left 单独添加到 line1 中。任何人都可以帮助我解决这个问题。多谢。

   #siteTitle {
        text-align:left;
        padding-left:5px;
    }

Answer 1

http://jsfiddle.net/vLbLbobf/1/

问题是您有 2 个并排的列，每个列的宽度为 50%。然后，当您对其中一个应用 5px 填充时，您将获得 50% + 50% + 5px 宽度，这会迫使第二列低于第一列。

最简单、最快的解决方法是将 text-indent: 5px在 #siteTitle而不是 padding-left .这只会影响第一行内容，但如果您只有 一行，它会毫无问题地工作。

你也可以放一个<div>里面#siteTitle ，然后应用以下 CSS 规则

#siteTitle > div { padding-left: 5px }

这会将填充应用到未设置为 50% 宽度的元素，因此它不会影响父列。