完全左对齐元素

Question

我想将标题和段落元素完全左对齐。是否有任何标准方法可以做到这一点，或者我只需要使用 padding-left。

@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
*{
  font-family: 'Lato', sans-serif;
	box-sizing:border-box;
  margin:0;
}
h1{
  font-size:100px;
}
p{
  font-size:21px;
}
body{
  padding:100px;
}

<p>Hello, I am</p>
<h1>K. Boozer</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur distinctio dolorum nihil voluptatum repudiandae suscipit, excepturi modi quia ratione aliquid ullam esse, qui, culpa officiis natus dicta adipisci provident facilis.</p>

Answer 1

您可以在您的 css 文件中使用 position: absolute; 使元素准确显示在您想要的位置。然后定义left: 0px; 或任何你想要的。希望对您有所帮助。

见http://www.w3schools.com/cssref/pr_class_position.asp

Answer 2

在 h1 上使用一些否定的margin-left。那里的空间是因为字体太大，每种字体都有自己不同的字母大小。

@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
*{
  font-family: 'Lato', sans-serif;
	box-sizing:border-box;
  margin:0;
}
h1{
  font-size:100px;
  margin-left: -6px;
}
p{
  font-size:21px;
}
body{
  padding:100px;
}

<p>Hello, I am</p>
<h1>K. Boozer</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur distinctio dolorum nihil voluptatum repudiandae suscipit, excepturi modi quia ratione aliquid ullam esse, qui, culpa officiis natus dicta adipisci provident facilis.</p>

关于负边距：

https://www.smashingmagazine.com/2009/07/the-definitive-guide-to-using-negative-margins/

它们是非常有效的 CSS

我不是在开玩笑。 W3C 甚至说，“允许边距属性为负值……”'Nuff 说。查看article了解更多详情。

负边距不是 hack

尤其如此。正是因为没有正确理解负边距，它才得到了它的骇人听闻的形象。只有当你用它来修复你在别处犯的错误时，它才会变成一个 hack。

Answer 3

我认为问题出在你的字体上，因为它看起来好像是从稍微向右开始的字母开始。

您可以使用 text-indent 来解决这个问题 - 如果您使用 -0.1em 之类的东西，那么无论它的大小如何，它都应该去掉字母的左侧填充：

@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
 * {
  font-family: 'Lato', sans-serif;
  box-sizing: border-box;
  margin: 0;
}
h1 {
  font-size: 100px;
}
p {
  font-size: 21px;
}
body {
  padding: 100px;
}
* { text-indent: -0.08em; }

<p>Hello, I am</p>
<h1>K. Boozer</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur distinctio dolorum nihil voluptatum repudiandae suscipit, excepturi modi quia ratione aliquid ullam esse, qui, culpa officiis natus dicta adipisci provident facilis.</p>

这种方法的唯一问题是如果文本超过 2 行或更多行，后续行将没有缩进

Answer 4

试试这个，而不是在 body css 上填充顶部

@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
*{
  font-family: 'Lato', sans-serif;
	box-sizing:border-box;
  margin:0;
}
h1{
  font-size:100px;
}
p{
  font-size:21px;
}
body{
  padding-top:100px;
}

<p>Hello, I am</p>
<h1>K. Boozer</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur distinctio dolorum nihil voluptatum repudiandae suscipit, excepturi modi quia ratione aliquid ullam esse, qui, culpa officiis natus dicta adipisci provident facilis.</p>