CSS样式不起作用答案

【问题标题】：Css style not workingCSS样式不起作用
【发布时间】：2014-06-05 04:36:46
【问题描述】：

这是我的工作网站 - mysite 我创建了一个页面并使用以下代码将其调用到主页

<div class="hilight-hometext">
<?php if(is_front_page()) :
$home_page_post_id = 308;
$home_page_post = get_post( $home_page_post_id, ARRAY_A );
$content_home = $home_page_post['post_content'];
$content_title = $home_page_post['post_title'];
?><?php
echo $content_home;
endif; ?></div>

结果是

<div class="hilight-hometext">
<div id="hilightbox">
<div class="hilightbox-text">
<h2>At Salisbury we want everyone to understand their landscaping choices</h2>
Our latest landscaping innovation is our Outdoor Vision questionnaire. We’ll guide you     through a set of questions that will help you realize what you want out of your yard.

</div>
<!-- end tier 2 text -->
<div class="hilightbox-action">

<a class="myButton" href="resources/the-outdoor-vision-tool/">GET STARTED</a>

Your Outdoor Vision

</div>

</div></div>

我添加了如下样式

#hilightbox {
background: url(../img/action-bg.jpg);
width: 100%;
margin: 20px auto;
}
#hilightbox .hilightbox-text {
width: 75%;
float: left;
margin: 0;
}
#hilightbox .hilightbox-action {
width: 25%;
float: left;
padding: 15px 0;
}
.myButton {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c9df23),         color-stop(1, #747728));
background: -moz-linear-gradient(center top, #c9df23 5%, #747728 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9df23', endColorstr='#747728');
background-color: #c9df23;
display: inline-block;
color: #ffffff;
font-family: Arial;
font-size: 20px;
font-weight: bold;
padding: 14px 14px;
text-decoration: none;
text-shadow: 1px 1px 0px #747728;
}

但是背景图片和样式没有显示出来。请帮忙！！谢谢

【问题讨论】：

您如何将样式表导入您的网页？
我不确定，但您的 css 可能会被其他 css 覆盖，因此请尝试在应用元素后添加 !important，例如宽度：75% !important;并检查您的 bg 图像并找出路径是否正确。@Melvin
用 wordpress 主题编码
背景图片如果你在#hilightbox上检查它，因为它的孩子是浮动的#hilightbox没有占据全高你需要添加css溢出：隐藏；在#hilightbox
@SmartKiller 路径是正确的也给出了！重要的..没有帮助:(

标签： php html css wordpress styles

【解决方案1】：

我想如果你只是添加这个：

#hilightbox {
  background: url(../img/action-bg.jpg);
  width: 100%;
  margin: 20px auto;
  overflow: hidden;
}

它会解决你的问题。目前您的容器 div #hilightbox 不知道子 div 的（.hilightbox-text 和 hilightbox-action）height 和 width 因为 float:left 属性。

【讨论】：