How to write the style of CSS3 Tianzi grid list
|
In many projects, it is necessary to implement the function of grid display, with a gray dividing line in the middle and none on both sides. As shown in the figure:
According to the general idea, set the width of li and add style to the li tag through nth-of-type(n){}. We set each li to a width of 33.33%, but when we add a 1px border, the rightmost content gets pushed down. This can be achieved by adding :before :after pseudo-class elements to the parent ul. Without occupying the width of li When displaying 3 columns, this is achieved by adding :before to ul CSS
<style>
ul li{ list-style: none;}
.mp-list{
position: relative;
overflow: hidden;
z-index: 0;
background-color: #fff;
}
.mp-list:before {
content: '';
position: absolute;
width: 33.33%;
left: 33.33%;
height: 100%;
border-left: .02rem solid #ddd;
border-right: .02rem solid #ddd;
}
.mp-list li {
width: 33.33%;
height: 2rem;
line-height: 2rem;
font-size: .28rem;
text-align: center;
border-bottom: .02rem solid #ddd;
margin-bottom: -1px;
float: left;
position: relative;
z-index: 10;
color: #212121;
}
.mp-list li a {
color: #212121;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .28rem;
}
</style>HTML
<ul class="mp-list">
<li><a hybrid-link="" href="" title="">Hong Kong</a></li>
<li><a hybrid-link="" href="" title="">Macao</a></li>
<li><a hybrid-link="" href="" title="">Taiwan</a></li>
<li><a hybrid-link="" href="" title="">Bangkok</a></li>
<li><a hybrid-link="" href="" title="">Singapore</a></li>
<li><a hybrid-link="" href="" title="">Seoul</a></li>
<li><a hybrid-link="" href="" title="">Tokyo</a></li>
<li><a hybrid-link="" href="" title="">Jeju Island</a></li>
<li><a hybrid-link="" href="" title="">Pattaya</a></li>
</ul>When 4 columns are displayed, add styles to :after. Note that you need to change the width of li and the position of .mp-list:before.
.mp-list:after {
content: '';
position: absolute;
width: 10%;
left: 75%;
height: 100%;
border-left: .02rem solid #ddd;
border-right: 0;
}The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: The implementation principle of Zabbix dynamic execution monitoring collection script
>>: MySQL string splitting example (string extraction without separator)
Recommend
The top fixed div can be set to a semi-transparent effect
Copy code The code is as follows: <!DOCTYPE ht...
An article teaches you how to use Vue's watch listener
Table of contents Listener watch Format Set up th...
Summary of various postures of MySQL privilege escalation
Table of contents 1. Write Webshell into outfile ...
js to realize the function of uploading pictures
The principle of uploading pictures on the front ...
Analysis of the usage of replace and regexp for regular expression replacement in MySQL
This article uses examples to illustrate the use ...
MySQL query specifies that the field is not a number and comma sql
Core SQL statements MySQL query statement that do...
Detailed explanation of MySQL master-slave replication and read-write separation
Table of contents Preface 1. Overview 2. Read-wri...
A brief discussion on VUE uni-app custom components
1. Parent components can pass data to child compo...
A brief analysis of SQL examples for finding uncommitted transactions in MySQL
A long time ago, I summarized a blog post titled ...
A Preliminary Study on Vue Unit Testing
Table of contents Preface Why introduce unit test...
Detailed explanation of the implementation steps of MySQL dual-machine hot standby and load balancing
The MySQL database does not have an incremental b...
Implementation of CSS border length control function
In the past, when I needed the border length to b...
Detailed explanation of how to solve the position:fixed fixed positioning offset problem
question CSS fixed positioning position:fixed is ...
Some parameter descriptions of text input boxes in web design
<br />In general guestbooks, forums and othe...
Analysis of the implementation of MySQL statement locking
Abstract: Analysis of two MySQL SQL statement loc...