无法填充左边 - 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/

问题是你有两列并排，每列50％宽。然后当你将5px填充应用于其中一个时，你得到50％+ 50％+ 5px的宽度，这会迫使第二列在第一列之下。

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

您也可以在<div>内加#siteTitle，然后应用以下CSS规则

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

这会将填充应用于不是设置为50％宽度的元素，因此不会影响父列。