为文本设置固定的空格

Question

我是CSS的新手，所以如果这个问题有点简单，我道歉。

我的导航栏位于页面中央，宽度为“x”

我想要做的是为我的<p>文字创建空白区域，这样如果你画了两条垂直线;触摸导航栏末端的文本总是触及垂直线 - 无论窗口大小如何。

我当前的解决方案使文本相对于窗口大小移动，而我希望我的文本在对齐时与垂直轴上的导航栏对齐。

这是我想要更清楚的图片：

这是我当前的解决方案，只有在窗口大小合适时才有效：

HTML：

<p id="body"> blah blah ..... </p>

CSS：

#body {
   margin: 25px 310px 25px 310px;
   text-align: justify;
   line-height: 30px;
}

Answer 1

为“p”和中心边距赋予相同的宽度，就像导航栏一样。

<强> HTML

<div id='navbar'></div
<p id="body"> blah blah ..... </p>

CSS

#navbar, p {
   width: 900px;
   margin: 10px auto;
}

p {
    text-align: justify;
    line-height: 30px;
}

Noe你的“导航栏”和“p”都可以根据需要垂直对齐。