html - 如何将 div 彼此相邻放置,在其他两个 div 之间保持 100% 的宽度
问题描述
我想用左右箭头滚动,然后我单击中心 div 中的左箭头或右箭头内容将向左或向右移动。
但是现在中心 div 正在将右箭头移动到可见区域之外,无论父宽度如何(响应式),如何保持中心 div 的固定宽度。具有固定宽度的箭头。只有 sizeof center div 改变。
<div class="border-faded" style="display: flex; height:50px; width:100%; background-color: #f8f9fb; overflow-y: hidden; overflow-x: hidden">
<div class="scrollleft" style="width:50px; float: left; cursor: pointer; margin-bottom: 5px; margin-right: 5px;">LEFT</div>
<div id="scrollBar" class="w-100" style="float: left; white-space: nowrap">
xfxgggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
</div>
<div class="scrollright" style="width: 50px; float: right; cursor: pointer; margin-bottom: 5px; margin-right: 5px;">RIGHT</div>
</div>
解决方案
推荐阅读
- python - python 无法导入名称'is_list_like'
- vb6 - MSXML 加载 url 仅在 Windows 2016 服务器上失败
- php - 在while循环外使用变量
- javascript - Phaser3 旋转动画
- asp.net-mvc - Asp.Net Mvc:在类库中共享脚本/样式文件的最佳方式是什么?
- c# - 如何在运行时读取我的 log4net 日志
- python - Python 中用于图像增强的图像增强管道中的错误
- php - PHP SMTP 邮件脚本不起作用
- java - 如何对 ArrayList 进行排序
使用比较器? - gradle - 使用电报 api gradle 同步失败:ndk bundle