我在CSS网格布局中创建了6列。我在列表中有4个项目,但希望将这些项目放置在2-5列中。我该怎么办?
public Column makeJoinConditional(Dataset<Row> df1, Dataset<Row> df2, List<String> columnNames, Column c) {
if (c==null) {
String top = columnNames.get(0);
columnNames.remove(0);
Column first = df1.col(top).equalTo(df2.col(top));
return makeJoinConditional(df1,df2, columnNames,first);
} else {
if (columnNames.size()==0) {
return c;
} else {
String top = columnNames.get(0);
columnNames.remove(0);
Column next = c.and( df1.col(top).equalTo(df2.col(top)) );
return makeJoinConditional(df1,df2, columnNames,next);
}
}
}
public Dataset<Row> joinDataFrames(Dataset<Row> df1, Dataset<Row> df2, List<String> columns) {
Column joinCols = makeJoinConditional(df1,df2,columns,null);
return df1.join(df2,joinCols);
}
#wrapper {
display: grid;
grid-gap: 20px;
}
#portfolio-nav ul {
display: grid;
grid-template-columns: repeat(6, 1fr);
text-align: center;
padding: 0;
list-style: none;
}
答案 0 :(得分:4)
您可以添加一个伪元素,该伪元素将放置在第一列中,并推动另一列从第二列开始:
#wrapper {
display: grid;
grid-gap: 20px;
}
#portfolio-nav ul {
display: grid;
grid-template-columns: repeat(6, 1fr);
text-align: center;
padding: 0;
list-style: none;
}
#portfolio-nav ul:before {
content: "";
}
<div class="wrapper">
<div id="portfolio-nav">
<ul>
<li><a href="#">ALL</a></li>
<li><a href="#">Advert/Flyers</a></li>
<li><a href="#">Branding</a></li>
<li><a href="#">Videos</a></li>
</ul>
</div>
</div>
或者您可以使第一个元素从第二列开始,另一个跟随:
#wrapper {
display: grid;
grid-gap: 20px;
}
#portfolio-nav ul {
display: grid;
grid-template-columns: repeat(6, 1fr);
text-align: center;
padding: 0;
list-style: none;
}
#portfolio-nav ul > :first-child {
grid-column:2;
}
<div class="wrapper">
<div id="portfolio-nav">
<ul>
<li><a href="#">ALL</a></li>
<li><a href="#">Advert/Flyers</a></li>
<li><a href="#">Branding</a></li>
<li><a href="#">Videos</a></li>
</ul>
</div>
</div>
您还可以如下修改网格定义:
#wrapper {
display: grid;
grid-gap: 20px;
}
#portfolio-nav {
display: grid;
grid-template-columns: 1fr 4fr 1fr;
}
#portfolio-nav ul {
display: grid;
grid-column:2;
grid-template-columns: repeat(4, 1fr);
text-align: center;
padding: 0;
list-style: none;
}
<div class="wrapper">
<div id="portfolio-nav">
<ul>
<li><a href="#">ALL</a></li>
<li><a href="#">Advert/Flyers</a></li>
<li><a href="#">Branding</a></li>
<li><a href="#">Videos</a></li>
</ul>
</div>
</div>
您还可以考虑使用填充来替换空列:
#wrapper {
display: grid;
grid-gap: 20px;
}
#portfolio-nav ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
padding:0 calc(100%/6);
text-align: center;
list-style: none;
}
<div class="wrapper">
<div id="portfolio-nav">
<ul>
<li><a href="#">ALL</a></li>
<li><a href="#">Advert/Flyers</a></li>
<li><a href="#">Branding</a></li>
<li><a href="#">Videos</a></li>
</ul>
</div>
</div>
答案 1 :(得分:1)
您可以使用li
将第一行grid-column: 2
放在第二列中-参见下面的演示
#wrapper {
display: grid;
grid-gap: 20px;
}
#portfolio-nav ul {
display: grid;
grid-template-columns: repeat(6, 1fr);
text-align: center;
padding: 0;
list-style: none;
}
ul li:first-child {
grid-column: 2; /* added */
}
<div class="wrapper">
<div id="portfolio-nav">
<ul>
<li><a href="#">ALL</a></li>
<li><a href="#">Advert/Flyers</a></li>
<li><a href="#">Branding</a></li>
<li><a href="#">Videos</a></li>
</ul>
</div>
</div>