像個在CSS網格的網格項

我創建了所需的字段的表單僞元素。爲了將這些標記爲必需，我將一個星號（*）作爲::before元素並將其右移，使其位於該字段的右上角。像個在CSS網格的網格項

我遇到的問題是這些字段中的一部分與CSS網格一起定位，當我向網格中添加::before元素時，它被視爲另一個網格項，並將所有內容都推送到新的網格行。

爲什麼CSS網格治療::before元素作爲另一電網項目？我怎樣才能讓星號像輸入元素一樣定位？

這裏是基本的HTML/CSS：

html { 
 
    width: 75%; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
} 
 

 
input { 
 
    width: 100% 
 
} 
 

 
.grid { 
 
    display: grid; 
 
    grid-template-columns: .33fr .33fr .33fr; 
 
} 
 

 
li.required::before { 
 
    content: '*'; 
 
    float: right; 
 
    font-size: 15px; 
 
}

<ul> 
 
    <li class="required"> 
 
    <input type="text"> 
 
    </li> 
 
    <li class="grid required"> 
 
    <p>one</p> 
 
    <p>two</p> 
 
    <p>three</p> 
 
    </li> 
 
    <li class="required"> 
 
    <input type="text"> 
 
    </li> 
 
</ul>

這裏有一個小提琴：https://jsfiddle.net/zbqucvt9/

來源

2017-08-09 Andrea

僞元件產生相同種類框的實際元件做的。就CSS佈局而言，僞元素框和實際元素框是兩種。在幾乎任何其他情況下，您都會發現僞元素框的行爲與實際元素框相同。 – BoltClock

僞元素被認爲是在網格容器（just like in a flex container）子元素。因此，他們承擔了網格項目的特點。

你總是可以從絕對定位文檔流去除網格項目。然後使用CSS髒性能（left，right，top，bottom）移動它們。

下面是一個基本的例子：

html { 
 
    width: 75%; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
} 
 

 
input { 
 
    width: 100% 
 
} 
 

 
.grid { 
 
    display: grid; 
 
    grid-template-columns: 1fr 1fr 1fr; 
 
} 
 

 
li { 
 
    position: relative; 
 
} 
 

 
li.required::after { 
 
    content: '*'; 
 
    font-size: 15px; 
 
    color: red; 
 
    position: absolute; 
 
    right: -15px; 
 
    top: -15px; 
 
}

<ul> 
 
    <li class="required"> 
 
    <input type="text"> 
 
    </li> 
 
    <li class="grid required"> 
 
    <p>one</p> 
 
    <p>two</p> 
 
    <p>three</p> 
 
    </li> 
 
    <li class="required"> 
 
    <input type="text"> 
 
    </li> 
 
</ul>

來源

2017-08-09 20:32:11

像個在CSS網格的網格項

回答

相關問題