html 或 css 来调整和格式化博客文章的宽度答案

【问题标题】：html or css to adjust and format the width of a blog posthtml 或 css 来调整和格式化博客文章的宽度
【发布时间】：2018-06-04 15:28:15
【问题描述】：

我的网站上的代码有些困难。现在，我的博客文章文本跨越了内容页面的整个宽度并居中。

我希望文本左对齐，每边有相等的边距，并使博客内容的宽度更窄，这样每行的字符更少..就像这样example blog post

我希望每篇博文都采用相同的格式，但我尝试的所有方法似乎都不起作用？我不确定我应该更改或添加什么 css/html。我已经尝试过调整框大小、调整边距以及调整边距，但它没有给我我正在寻找的结果，我不确定要采取什么步骤。任何帮助，将不胜感激。

谢谢！

【问题讨论】：

请添加您尝试过的代码。

标签： html css

【解决方案1】：

您应该创建新的<div id="test"> 元素并将您的文本放入其中。为该 div 添加以下 CSS：

#test{
width: 680px; /* adding width of text field */
margin: 0 auto; /* centering it */
text-align: left; /* aligning text to left side */

font-size: 15px; /* size of your font */
line-height: 24px; /* space between two lines */
letter-spacing: -0.01em; /* space between two letters */
/* By playing with values of last 3 lines you can make text look exactly how you want, I tried to mimic site that you posted as much as I could (I c/p-ed their CSS for text) */
}

【讨论】：

非常感谢您对我的帮助！它工作得很好。对此，我真的非常感激。我需要了解更多，这对我来说真的很清楚。

【解决方案2】：

您可以为此使用 Bootstrap 类。它真的会帮助你很多。它的容器类会给你相等的边距（您可以在此处查看示例https://getbootstrap.com/docs/4.0/layout/overview/）

它的网格类将帮助您设置左右部分（参见链接https://getbootstrap.com/docs/4.0/layout/grid/）。

希望这会对你有所帮助。

【讨论】：