風格保持一致的文本包裹

.has-parent:not(.has-children):before { 
 
    padding-right: 0.25em; 
 
    content: "\0007C"; 
 
    font-size: large; 
 
}

<div class="has-parent" style="padding-left: 1em;"> 
 
    Component 6 
 
</div>

當我有一個包裹到下一行文本。當包裝到下一行時，我希望文本對齊，而不是在一個範圍內移動。下面的圖片顯示了我面臨的問題。

在上述圖像，我想6至下在對準我沒有在佈局控制。我可以修改CSS來獲得所需的效果。單元格的佈局如下。

<div class="has-parent" style="padding-left: 1em;"> 
    Component 6 
</div>

The |你看到的是來自CSS：

.has-parent:not(.has-children):before { 
    padding-right: 0.25em; 
    content: "\0007C"; 
    font-size: large; 
}

來源

2017-02-20 vijayst

您可以在父元素上使用display: flex。

.has-parent { 
 
    border: 1px solid black; 
 
    width: 80px; 
 
    display: flex; 
 
} 
 

 
.has-parent:not(.has-children):before { 
 
    padding-right: 0.25em; 
 
    content: "\0007C"; 
 
}

<div class="has-parent" style="padding-left: 1em;"> 
 
    Component 6 
 
</div>

來源

2017-02-20 13:03:32

新增對齊項：中心爲中心的父元素。謝謝。 – vijayst

使用float: left爲.has-parent:not(.has-children):before 應該做的工作

來源

2017-02-20 12:57:16 Lucian

使用position: absolute爲.has-parent:not(.has-children):before與margin和padding玩。

JSFiddle

.has-parent { 
 
    padding: 0.1em 0 0 1.5em; 
 
} 
 

 
.has-parent:not(.has-children):before { 
 
    content: "\0007C"; 
 
    font-size: large; 
 
    position: absolute; 
 
    margin: -0.1em 0 0 -0.5em; 
 
}

<div class="has-parent"> 
 
    Component 6 
 
</div>

來源

2017-02-20 13:00:16

.has-parent:not(.has-children):before { 
 
    padding-right: 0.25em; 
 
    content: "\0007C"; 
 
    font-size: large; 
 
} 
 

 
span { 
 
    width: 20px; 
 
    text-align: left; 
 
    display: inline-block; 
 
} 
 

 
@media screen and (max-width:142px){ 
 
    span { 
 
    text-align: right; 
 
    } 
 
}

<div class="has-parent" style="padding-left: 1em;"> 
 
    Component <span>6</span> 
 
</div>

更改@media查詢到任何你需要的屏幕尺寸。

來源

2017-02-20 13:03:19 Gobbin

風格保持一致的文本包裹

回答

相關問題