希望得到大家的帮助~需要实现一个这样的效果：中间的内容可以是 React 组件，可以是文字等任意的东西，提前不知道它的宽度值。两边的线等长，随着中间的内容增加或者减少进行改变，但是和中间的文字总是保持一定的间隔。总结起来就是三列布局，中间内容不定宽，两边内容等宽，且可以自适应中间内容宽度的变化。目前自己可以实现中间内容定宽的情况，但是不定宽的情况却做不出来，希望大家提供一些思路，感谢大家。<div class="horizontalLineWithContent">
<span class="horizontalFirstAdditionalLayer"></div>
"AND" <span class="horizontalFirstAdditionalLayer"></div><div>html 部分考虑到 React 无法操作伪元素，所以将伪元素换成了 span 标签.horizontalLineWithContent { position: relative; margin: 1em auto; text-align: center; color: #eee;
.horizontalFirstAdditionalLayer, .horizontalSecondAdditionalLayer{ position: absolute; border-top: 1px solid #eee; top: 50%;
} .horizontalFirstAdditionalLayer { left: 0;
} .horizontalSecondAdditionalLayer { right: 0;
}
}希望大家多多提供思路，多谢各位啦~~
1 回答
青春有我
TA贡献1784条经验 获得超8个赞
有考虑and背景因素吗？
如果不考虑背景的话可以这样做：
<body style=" text-align: center; border-top: 1px solid; "><span style=" position: relative; top: -10px; background: white; padding: 0 10px; ">and</span></body>
当然这只是方法之一，其它方法还有的，我再想想再来
添加回答
举报
0/150
提交
取消