简体   繁体   English

Foundation 5标签-内容未填充标签容器的宽度

[英]Foundation 5 Tabs - content is not filling width of tab container

I have a web page where I am using the Foundation 5 tabs. 我有一个使用Foundation 5选项卡的网页。 The problem is that some of the tab's content does not fill the width of the container. 问题是选项卡的某些内容无法填充容器的宽度。 (i used images for the code examples because it was easier to summarize the code) (我使用图像作为代码示例,因为更容易汇总代码)

EXAMPLE #1 示例#1

THIS WORKS: 这项工作:

For example, this code works correctly and the tab content fills the tab container's width (note the code for tab panel4): 例如,此代码正确运行,并且选项卡内容填充了选项卡容器的宽度(请注意选项卡panel4的代码):

HTML Code: HTML代码:

在此处输入图片说明

HTML Display: HTML显示:

在此处输入图片说明

EXAMPLE # 2 例子#2

THIS DOES NOT WORK: 这不起作用:

The following html code for the tabs displays the content, but the tab's content does not "fill" the width of the container like the example above (code for tab panel 1). 标签的以下html代码显示了内容,但标签的内容并未像上面的示例(标签面板1的代码)那样“填充”容器的宽度。

HTML code: HTML代码:

在此处输入图片说明

HTML Display: HTML显示:

在此处输入图片说明

Notice how the tab content is not as wide as the first example. 注意选项卡的内容不如第一个示例那么宽。

QUESTION: 题:

I need help trouble shooting this so that the tab content (a fieldset) fills the width of the tab container. 我需要帮助解决此问题,以便选项卡内容(字段集)填充选项卡容器的宽度。 I hope this makes sense. 我希望这是有道理的。 I can post the full code for download if anyone wishes. 如果有人愿意,我可以发布完整的代码以供下载。 I tried to keep is as short as possible. 我试图保持尽可能短。

Thanks in advance for you help 预先感谢您的帮助

Bahh, I was over thinking it, there was a simple css fix: Bahh,我想得太过分了,有一个简单的CSS修复程序:

I had to add the following to an override.css file I use to augment the foundation.min.css file 我必须将以下内容添加到我用来增强foundation.min.css文件的override.css文件中

.tabs-content > .content {
    width: 100%;
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM