2017-07-06 86 views
0

我在这里创建一个FAQ页面:http://staging.nwcm.com/2017/07/06/faq-custom-css/为什么在不同div类之间显示不同的间距并具有相同的页边距设置?

这里是我的CSS:

/*TAB SETUP FORMATTING*/ 

div.tab_counter_0, div.tab_counter_0 active_tab, div#tab-id-1-container { 
border-color: #339966 !important; 
} 

div.tab_counter_1, div.tab_counter_1 active_tab, div#tab-id-2-container { 
border-color: #009999 !important; 
} 

div.tab_counter_2, div.tab_counter_2 active_tab, div#tab-id-3-container { 
border-color: #3399ff !important; 
} 

.tab { 
font-size: 1.5em !important; 
} 

/*END TAB SETUP FORMATTING*/ 

div.ufaq-faq-category h4 { 
font-size: 1.5em !important; 
margin: -5px !important; 
} 

div.ufaq-faq-category-inner { 
margin-top: 1.5em; 
margin-bottom: -1em; 
} 

div.ufaq-faq-body { 
margin-top: -18px !important; 
} 

.ufaq-faq-post p, .ufaq-faq-post li { 
font-weight: 800 !important; 
clear: left; 
font-size: 14px; 
margin-top: 0px; 
margin-bottom: 10px; 
} 

.ufaq-faq-title, .ufaq-faq-category-title { 
margin-bottom: 4px; 
} 

网站信息(不知道这是很重要的):我现在用的是终极FAQ(1)插件在一个Wordpress网站上,由Kriesi提供的带有Avia Layout Builder的Enfold主题(2)。这些标签内置于我的主题内,标签内的内容都是我个人的常见问题解答类别。下面是第一选项卡的内容的简码:

[ultimate-faqs include_category='your-contributions'] 
[ultimate-faqs include_category='employer-contributions'] 
[ultimate-faqs include_category='roth'] 
[ultimate-faqs include_category='eligibility'] 
[ultimate-faqs include_category='vesting'] 
[ultimate-faqs include_category='401k-distributions'] 
[ultimate-faqs include_category='rollovers'] 
[ultimate-faqs include_category='loans'] 

技术问题:不同的div类之间的间隔,与相同的造型,导致这些元件之间的间距可变。每次回答之前,我需要每个标题之后的空格保持一致。看起来,当问题长于一行时,会发生这种差异。为了得到这个问题的一个很好的图片,请参阅:

你的贡献:

  • 必须我的雇主提供401(k)计划?
  • 我今年换了工作。如果我贡献......怎么办?
  • 我能贡献多少?

归属:

  • 如果我后,我离开公司的就业...?

LINKS

(1)https://wordpress.org/plugins/ultimate-faqs/

(2)http://www.kriesi.at/themes/enfold-2017/

+0

Sugestion:Margim底部应用于“元素之后”。如果你有两行同一段落,只应用1次。你需要的是改变行高属性。 –

回答

0

你正面临因为 '+' 和本次发行 ' - ' 减号。他们被分配一个height和问题和答案之间的空间是因为这个height。解释有点复杂。我会发布解决方案。看看它是否适合你。

.ewd-ufaq-post-margin-symbol{height:21px;} 
.ufaq-faq-title-text{margin-bottom:10px;} 

将此添加到FAQ插件的CSS文件的底部,或者更好地搜索负责的样式并更改它们。让我知道事情的后续。

+0

非常感谢!如果您有时间解释,我很想理解为什么这会起作用。无论哪种方式 - 你是一个救星,它的工作! –

+0

如果你检查,你会发现'.ewd-ufaq-post-margin-symbol'的高度为35px,当它需要的时候是21px。这个额外的14px一直向下推动答案。然而,当任何问题占用两行时,14px不足以将问题的答案压低,因为问题超出了额外的14px,并且答案与您的问题相抵触。因此,第一种修正额外高度的样式规则和第二种样式规则可以使所有问题和答案的间距保持一致。希望这是有道理的。 –

+0

这很有道理!谢谢 –

相关问题