Question

我正在尝试使用缩进的答案创建问答页面。我在页面顶部的左侧浮动了一个图像。我想要做的是： Indented Answers

到目前为止，这是我的HTML：

＆＃13;

<h2 align="center">Candidate Questionnaire</h2>
<a href="https://d3n8a8pro7vhmx.cloudfront.net/rogersparkfoodcoop/pages/161/attachments/original/1453726298/Anthony_Boatman_Square.jpg?1453726298">
  <img style="float: left; border: 1px solid black; margin-top: 1px; margin-bottom: 1px; margin-left: 6px; margin-right: 6px;" src="https://d3n8a8pro7vhmx.cloudfront.net/rogersparkfoodcoop/pages/161/attachments/original/1453726298/Anthony_Boatman_Square.jpg?1453726298"
  alt="Anthony Boatman" width="150" height="150" />
</a>
<h3>Anthony Boatman</h3>
<h4>Why do you want to serve on the Board of Directors for the RPFC?</h4>
<p style="margin-left: 25px">I believe that food is becoming more and more a major concern. Here is some more sample text. Here is some more sample text. Here is some more sample text. Here is some more sample text. Here is some more sample text. Here is some more sample text. Here is some more sample text. Here is some more sample text. Here is some more sample text. Here is some more sample text. Here is some more sample text.</p>

＆＃13;

但段落的左边缘位于页面的左边缘而不是图像的右边缘。如果我缩进超过图像的宽度，那么该段落不会正确包装。有没有办法缩进整个段落与图像和页面相关的缩进？我想在样式表中使用缩进创建一个段落类p.answers。

Answer 1

您可以将问题答案包装在div中并应用以下css。

.answers {
  width: 500px;
  float: left;
}

请参阅以下Jsfidle。

 https://jsfiddle.net/Rukhsana/fek24ag1/

Answer 2

将padding添加到段落。

 p{
   padding-left: 140px;
 }

编辑很容易，如果不使用内联样式，则在head标记之间使用以下CSS作为嵌入式样式：

img {
  float: left;
  border: 1px solid black; 
  margin-top: 1px; 
  margin-bottom: 1px; 
  margin-left: 6px; 
  margin-right: 6px;
  }

p {
   padding-left: 140px;
 }

Answer 3

经过一番尝试后，我找到了一个解决方案：为您要缩进的标签提供属性display: table和padding-left: 10px

如何缩进包裹浮动图像的段落？

3 个答案: