Question

我正在使用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吗？

Answer 1

.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>

Answer 2

如果您将所需的文本（包含<br/>）包装在带有white-space: pre的元素中，则所有\n都将呈现为<br/>。

您还可以使用<pre></pre>标签来包裹您的文本。

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

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

及其CSS（不好意思，没有片段或小提琴，我正在用手机打字，无法访问stackoverflow编辑器的代码工具）：

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

添加的部分

现在，就您的情况而言，请仅尝试以下操作：

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

Answer 3

使用

margin-bottom: 100px;
display: block;

字体标签。

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

<br/>使用CSS的替代方法

3 个答案: