前端排版-使用inline-block且两端对齐

作者：weixin_40725706 | 2024-03-23 14:24:09

踩

inline-block 文字两端对齐

那天排遇到这样一个页面，每个logo紧挨着，而且两端对齐。尼玛，没招啊~

今天终于找到了解决办法：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style>
 6         ul { margin: 0px; padding: 0px; text-align: justify; font-size: 0px; /*hide whitespace between elements*/ width: 510px; }
 7             ul li { display: inline-block; width: 100px; height: 100px; border: 1px solid red; }
 8             ul:after { content: ''; display: inline-block; width: 100%; height: 0; }
 9     </style>
10 </head>
11 <body>
12     <ul id="Grid">
13         <li>1</li>
14         <li>2</li>
15         <li>3</li>
16         <li>4</li>
17         <li>5</li>
18 
19         <li>6</li>
20         <li>7</li>
21         <li>8</li>
22         <li>9</li>
23         <li>10</li>
24     </ul>
25 </body>
26 </html>

主要有两个点：

1.不用浮动，用inline-block，但是使用inline-block，元素之间有间隔，用font-size:0px处理

2.两端对齐：使用text-align:justify。在其自然状态下，"text-align:justify"就不能工作，除非内容足够长并引起一个换行符。样式的最后一行解决该问题。

原文链接：http://www.w3cplus.com/css/text-align-justify-and-rwd.html

感谢大漠

转载于:https://www.cnblogs.com/talentzemin/p/4342899.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/295717