模拟公交站台竖直排列，两端对齐

今天看到一个公家车站台的公家站牌，对站名的排列方式很有兴趣，html和css没有提供文字竖直排列的简便方法，需要我们利用一些技巧才能完成

 大概要的效果就是这样的，竖直排列，两端对齐

首先先对竖直排列进行设计

先上html代码：

 1     <ul>
 2         <li><b>站牌1b>li>
 3         <li><b>站牌2b>li>
 4         <li><b>长站牌3b>li>
 5         <li><b>很长的站牌4b>li>
 6         <li><b>超长的站牌5b>li>
 7         <li><b>站牌6b>li>
 8         <li><b>站牌一二7b>li>
 9         <li><b>站牌一8b>li>
10         <li><b>站牌9b>li>
11         <li><b>站牌一二10b>li>
12         <li><b>站牌1b>li>
13         <li><b>站牌2b>li>
14         <li><b>长站牌3b>li>
15         <li><b>很长的站牌4b>li>
16         <li><b>超长的站牌5b>li>
17     ul>

先对ul进行一些基本的配置：

1 ul {
2     width: 260px;
3     height: 90px;
4     border: 1px solid yellow;
5     margin: 15px;
6     list-style: none;
7 }

初步的效果是：

利用flex伸缩盒来实现效果：

ul {width: 260px;height: 90px;border: 1px solid yellow;margin: 15px;list-style: none;/*定义flex伸缩盒*/display: -webkit-flex;display: flex;/*设置伸缩盒的子元素向两端对齐*/justify-content: space-between;-webkit-justify-content: space-between;-moz-justify-content: space-between;
}ul li {font-size: 11px;/*固定宽度使文字强制换行竖直排列*/width: 12px;text-align: center;height: 80px;margin-top: 5px;
}

竖直排列的效果：

接下来是竖直方向的两端对齐，我使用的方法是给每一个元素加上一个标签，在li里面再定义一个flex盒子，以达到效果，个人感觉有点麻烦：

html代码：

<ul><li><span>站span><span>牌span><span>1span>li><li><span>站span><span>牌span><span>2span>li><li><span>长span><span>站span><span>牌span><span>3span>li><li><span>很span><span>长span><span>的span><span>站span><span>牌span><span>4span>li><li><span>超span><span>长span><span>的span><span>站span><span>牌span><span>5span>li><li><span>站span><span>牌span><span>6span>li><li><span>站span><span>牌span><span>一span><span>二span><span>7span>li><li><span>站span><span>牌span><span>一span><span>8span>li><li><span>站span><span>牌span><span>9span>li><li><span>站span><span>牌span><span>一span><span>二span><span>10span>li>ul>

css代码：

ul {width: 260px;height: 90px;border: 1px solid yellow;margin: 15px;list-style: none;/*定义flex伸缩盒*/display: -webkit-flex;display: flex;/*设置伸缩盒的子元素向两端对齐*/justify-content: space-between;-webkit-justify-content: space-between;-moz-justify-content: space-between;
}ul li {font-size: 11px;/*固定宽度使文字强制换行竖直排列*/width: 12px;text-align: center;height: 80px;margin-top: 5px;/*定义li的flex伸缩盒*/display: -webkit-flex;display: flex;/*设置伸缩盒的子元素向两端对齐*/justify-content: space-between;-webkit-justify-content: space-between;-moz-justify-content: space-between;/*设置子元素的排列方向是竖直方向*/flex-direction: column;-webkit-flex-direction: column;-moz-flex-direction: column;/*即每个li的子元素span为竖直方向的两端对齐*/
}

最终的效果是：

主要用到的3句代码是：

display:flex; 定义flex伸缩盒

justify-content; 设置子元素的对齐方式

flex-direction;设置伸缩盒子元素的方向 

转载于:https://www.cnblogs.com/Gary-Guoweihan/p/4912587.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！