18910140161

HTML选项卡式导航在新行上进行,而不是在移动端换行选项卡式文本-堆栈溢出

顺晟科技

2022-10-19 11:27:56

144

我有两个选项卡的选项卡导航。当屏幕宽度减少到一个小移动(低于415px)时,选项卡将放在两个不同的行上,而不是换行选项卡文本,这样两个选项卡都停留在一行上。我想在包装标签文本方面得到一些帮助。我已经尝试设置一个,更改了一些显示选项,但没有添加。

jsfiddle:https://jsfiddle.net/clubba/hqud9l46/2/

HTML

max-width

CSS

max-width

顺晟科技:

生成和添加到类将确保导航选项卡不会进入不同的行。但是这样做会给您的选项卡内容带来问题。您甚至不能将它们移动到不同的元素,因为这样检查的伪元素就不能工作了(它们只能与后代或兄弟姐妹一起工作)。当然有更好的解决方案,我不知道,但我意识到你可以做以下事情

  1. 由于您的问题归结为布局与设置布局有关,您可以使用网格而不是flex,因为您需要2D布局来防止导航选项卡被换行。

  2. 您可以使用位置并使选项卡内容的位置绝对相对于正文或导航选项卡。

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航