[英]How do I make the second element of a paragraph indent
我附加了這張圖像,(01)是固定的,而其他人則需要(理解您的期望)在彼此之間適當縮進。
查找附件我的CSS代碼
<div class="col-md-3 verticalLine "><h2><span class="numberCircle">01</span><span><a href="#">Understanding your Expectations</a></span></h2>
<p>We need to fully understand what you want to achieve so we consider all possible solutions.</p>
</div>
我基本上希望將理解您的期望從01縮進,將殘缺的單詞放在句子的第一個單詞之下。
謝謝
--CSS--
.sectors-a div h2 {
color: #5FD0FF;
font-size: 21px;
font-weight: normal;
padding-bottom: 20px;
}
.sectors-a div h2 span a {
color: #5FD0FF;
font-size: 20px;
font-weight: bold;
font-style: italic;
font-family: Pathway Gothic, Arial, Helvetica, sans-serif;
/* height: 28px; */
/*
text-indent: 100px;
padding-left: 10px;
*/
padding-left:10px;
padding-bottom: 15px;
}
.sectors-a div h2 span a:hover {
text-decoration: none;
}
.sectors-a div h2 span.numberCircle {
border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 50px;
height: 50px;
padding: 8px;
background: #5FD0FF;
border: 2px solid #5FD0FF;
color: #fff;
text-align: center;
font-weight: 900;
font-family: Pathway Gothic, Arial, Helvetica, sans-serif;
font-size: 25px;
}
.verticalLine {
border-right: 1px solid #727272;
}
.sectors-a {
border-top: 1px solid #ddd;
padding-top: 40px;
margin-top: 40px;
padding-bottom: 40px;
border-bottom: 1px solid #ddd;
background: url('../img/tabsBtmBg.png') repeat;
}
.ie .sectors div h2 a {
font-family: Exo2-ExtraBoldItalic,Arial, Helvetica, sans-serif;
}
.sectors div a {
margin-left: 0;
line-height: 21px;
font-size: 14px;
/* font-family: Pathway Gothic IE, Arial, Helvetica, sans-serif;*/
}
您可以使用position:absolute
從文檔流中刪除數字圈,然后在標題上設置display:inline-block
和padding
。
.col-md-3 {
width:200px; // The width of your column's
position:relative;
}
.numberCircle {
position:absolute;
top:0;
left:0;
}
h2 a {
padding-left:40px; // The space for your numberCircle
display:inline-block;
}
您可以應用display: table;
到同時包裹了兩個span標簽並應用display:table-cell; padding-left: 15px;
的<h2>
display:table-cell; padding-left: 15px;
display:table-cell; padding-left: 15px;
到<span class="numberCircle">01</span>
以在數字和標題之間<span class="numberCircle">01</span>
空格。
這是CSS代碼段:
.col-md-3 {
width:200px;
position:relative;
}
.col-md-3 h2 {
display: table;
}
.numberCircle {
display: table-cell;
padding-right: 15px;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.