已解决问题的方法:
1、多行字母换行:
word-break:break-all;
2、浮动导致的水平不对齐:
flex布局
3、不使用浮动时如何左右排布:
flex布局的justify-content:space-between;
4、中间文字如何靠左:
加flex-basic属性
5、隐藏显示需要占位的情况:
opacity:0
6、右侧×号如何垂直居中:
父元素:position: relative;
子元素: position: absolute; transform: translateY;
留言板原效果图(布局待完善效果)
图示 中间留言内容部分 代码
<li v-for="(item,index) in list">
<span>{{index+1}}.</span>
<span id="essay">{{item}}</span>
<!-- <div class="delBox"> -->
<span class="delete" @click="remove(index)">×</span>
<!-- </div> -->
</li>
li{
color: #999999;
border-bottom: 0.5px solid #e4e4e4;
font-size: 15px;
padding: 14px 12px;
list-style-type: none;
/* word-wrap: break-word; */
word-break: break-all;
/* flex布局 */
display: flex;
/* justify-content: row; */
justify-content: space-between;
}
li span{
color: #b1b1b1;
font-size: 10px;
padding: 0 8px;
background-color: rgb(17, 24, 114);
}
.delete{
padding: 0 5px;
font-size: 12px;
cursor: pointer;
/* 隐藏效果 */
/* opacity: 0; */
display: inline-block;
vertical-align: middle;
}
一开始使用浮动,后来出现很多问题,比如不能对齐,查了一下float导致不对齐的原因:
*原作者回答:https://zhidao.baidu.com/question/584664527.html*
- 右边的删除元素设置的css是鼠标悬浮显示,原先使用的是display:block和none
- 由于display:none;不占位置,导致了鼠标悬浮时文字重新排列问题,影响布局
- 后来改用flex布局代替float
- 用justify-content: space-between; 解决了×号跟随文字的问题
- 使用opacity:0代替display,解决了占位问题
(给两个span添加了padding)
现在又出现几个问题:
1、中间文字如何靠左
给中间的span加flex-basic属性
li span:nth-child(2){
flex-basis: 310px;
}
来自http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html详细的flex布局教程,十分感谢!
2、以及右侧×号如何垂直居中
(display: inline-block; vertical-align: middle;无效)
父元素:position: relative;
子元素: position: absolute; transform: translateY;
查到另一种方法:
父元素:display: table;
子元素:display: table-cell; vertical-align: middle;
但在这里不适用,因为破坏了flex布局的space-between
display:table和display:table-cell实现单行,多行文本垂直居中
https://blog.csdn.net/lishuai_it_trip/article/details/88411550