使用 CSS 替代 [重复]答案

【问题标题】：Alternative for using CSS [duplicate]使用 CSS 替代 [重复]
【发布时间】：2019-02-28 14:57:56
【问题描述】：

我正在使用br 标签为我的网页faq 创建一个换行符。
虽然结果是准确的，但有没有其他方法可以使用linebreak
通过 css 创建基于响应的网页。
通过谷歌搜索，我找到了pseudo 元素。但我没有得到它的正确形象。

.faqfirstsec {
  margin: 0 0 0 70px;
  background: lightgrey;
  height: 100%;
}

font.faqtitle {
  font-weight: bold;
}

font.faqques {
  color: red;
}

<div class="faqfirstsec">
  <font class="faqtitle" weight="bold">TITLE</font><br><br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>

  <font class="faqques">QUESTION 1</font><br><br>
  <font class="faqans">ANSWER 1<br> ANSWER 1。</font><br><br><br><br><br>
  <font class="faqques">QUESTION 2</font><br> ANSWER 2<br><br><br><br>
  <font class="faqques">QUESTION 3</font><br> ANSWER 3<br><br>
</div>

我想在问题 1 、 2 等之间创建一些空格。
我使用了 font class 标签，但不能使用 Margin。
我应该选择DIV 而不是FONT 吗？

【问题讨论】：

font 已弃用，请使用 div 并留出边距
font 标签已弃用。另外，如果你使用了这么多br 标签，那么你肯定做错了什么。你需要学习 CSS 定位。
@LGSon 所以给每个question 和answer 行提供DIV 并设置margin ？
@LGSon 使用DIV，您的代码看起来很干净而且很有条理。我有机会将您的评论标记为答案吗？
不能接受 cmets 作为答案。等待给定的回答者，他们可能会使用我的（也问过他们），并且重复的链接可能是一个很好的参考，所以我也在考虑关闭它。

标签： html css

【解决方案1】：

使用

margin-bottom: 100px;
display: block;

用于字体标签。

font 标签是一个内联元素，现在它已被弃用。使用 Div 或 span 代替字体标签。

【讨论】：

@LGSon，两者都是相同的答案。你为什么对我的回答投了反对票。
因为你建议如何使用font（虽然显示为块）。 font 已弃用且不应使用，因此使用它的答案是错误的答案。
有人提到字体标签已被弃用。
您仍然为字体标签引用给定的 CSS。一些用户只会尝试提供的 CSS，并且（仍然）可能会工作，他们可能会保留它，然后突然就不行了，所以我建议你改写答案

【解决方案2】：

.faqfirstsec {
	margin: 0 0 0 70px;
	background: lightgrey;
  height : 100%;           /* this doesn't do much unless parent has a height */
}

.faqtitle {
	font-weight: bold;
  margin-bottom: 10px;
}

.faqques {
	color: red;
  margin-bottom: 15px;
}

.faqans {
  margin-bottom: 35px;
}

<div class="faqfirstsec">
  <div class="faqtitle">TITLE</div>

  <div class ="faqques">QUESTION 1</div>
  <div class="faqans">ANSWER 1<br>ANSWER 1</div>
  
  <div class ="faqques">QUESTION 2</div>
  <div class="faqans">ANSWER 2<br>ANSWER 2</div>
  
  <div class ="faqques">QUESTION 3</div>
  <div class="faqans">ANSWER 3<br>ANSWER 3</div>
</div>

【讨论】：

【解决方案3】：

如果您将所需的文本（包含 ）包装在带有white-space: pre 的元素中，所有\ns 将呈现为 。

你也可以使用<pre></pre>标签来包裹你的文字。

但是关于HTML，你可以这样做：

 <span>hello</span><span data-x>BR!</span>

还有它的css（对不起，没有sn-p或fiddle，我正在用我的手机打字，我没有访问stackoverflow的编辑器的代码工具）：

[data-x]:before{
    content: "\A";
    white-space: pre;
 }

添加部分

现在，对于你的情况，只试试这个：

.faqans:before{
    content:"\A\A\A";/*per be, one \A*/
    white-space:pre;
}

【讨论】：