How to use pure CSS to make a list of articles in a news website

Xiaobian to share with you how to use pure CSS production of news sites in the list of articles, I believe most people do not know how, so share this article for your reference, I hope you read this article after a great harvest, let us go to understand it!

List of articles in news sites created with pure CSS

.list li{ width: 100%;} .list li a{ color: #77777; display: block; padding: 6px 0px 4px 15px; } .list li span{ float: right;/* float span element to right */ text-align: right;/* Date Right Aligned */ } News Headline 01 December 21, 2007 News Headline 02 December 21, 2007 News Headline 03 December 21, 2007 News Headline 04

Note:span must be placed in front, otherwise it will produce a line feed

The above is "How to use pure CSS production news website article list" all the content of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!