如何縮進文本而不在HTML代碼中使用邊距或填充？

Question

p內的文本應與h3元素在同一行中開始，就像在圖像波紋管中一樣，但不要使用margin或padding 。 有什么解決辦法嗎？

 .inner h1, h3{ display: inline-block; vertical-align: text-bottom; } 

 <div class="inner"> <h1>1.</h1> <h3>Download app</h3> <h3>Free</h3> <p> Some text here Some text here Some text here</p> <p> Some text here Some text here Some text here</p> </div> 

Answer 1

您可以為此簡單地使用ol list：

 <ol> <li> <h3>Download app<br/>Free</h3> <p> Some text here Some text here Some text here<br/>Some text here Some text here Some text here</p> </li> </ol> 

Answer 2

給p標簽加上text-indent ，如下所示：

.inner p {
  text-indent: 23px;
}

 .inner h1, h3{ display: inline-block; vertical-align: middle; } .inner p { text-indent: 23px; } 

 <div class="inner"> <h1>1.</h1><h3> Download app</h3> <h3>Free</h3> <p> Some text here Some text here Some text here</p> <p> Some text here Some text here Some text here</p> </div> 

Answer 3

使用flex-box可以“拉伸” h1以占據右側的整個高度。

 .inner { display: flex; } h1, h3 { margin: 0; } 

 <div class="inner"> <h1>1.</h1> <div> <h3>Download app Free</h3> <p> Some text here Some text here Some text here</p> <p> Some text here Some text here Some text here</p> </div> </div>