像个在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网格的网格项

回答

相关问题