Question

我是新手，正在设计Wordpress网站（www.dimjaa.org）。最近两天我一直在解决一个小CSS问题，但未能找到解决方案。我想寻求您的帮助以解决该问题，并希望了解其根本原因。我正在使用演变他们。我添加了标题小部件。标题小部件区域的内容是“登录”和“注销”链接。我想将它们显示在小部件区域的右上方。Image of the header-block showing unnecessary padding on both sides 我现在面临的两个问题是：1.无法更改保存小部件区域的标题块的背景色。否则，标题区域无法完全被窗口小部件区域覆盖（它在左右留有空白）。无法正确定位标头块。以上任何一项都可以视为问题的解决方案。 2.此外，“登录”和“注销”链接不能放置在该区域的右上方。甚至不能垂直居中。有趣的是，当我删除浮点数时：那么它可以垂直居中。我的html和CSS如下：

   .header-block{
	background-color: red;
    }
    .header-widgets{
	background-color: #CDAE02;
    }
    .user-log a{
	float: right;
	text-decoration: none;
	background-color:#581845;
	color: #ddd;
	border-radius: 15px;
	font-size: 14px;
	margin-right: 1em;
    }
    .user-log a:first-child{
	  padding: 4px 13px;
    }
    .user-log a:last-child{
	padding: 4px 8px;
    }
    .user-log a:hover {
	background-color:#B12307;
	font-size: 15px;
    }

    <ul class="user-log">
	<a href="#">Login</a>
	<a href="#">Logout</a>
    </ul>

我希望专家们提供解决方案，也希望收集知识以更好地理解问题。

Answer 1

容器是Bootstrap使用的类，因此您可以通过在规则中使用！important来强制该类的宽度为100％，也可以定义一个名为 container-完整，然后将其替换为容器类：

.container-full{
    margin: 0 auto;
    width: 100%;
}

此外，更改标头块的颜色也不会影响，因为它具有其他具有其他颜色的子代，并且没有空间在背景中显示该颜色。您可以更改标题小工具的颜色。似乎您已经在.widget-content和.header-widgets类中定义了填充和边距规则。您要么必须在style.css中更改这些规则，要么编写新的规则，这些新规则在规则末尾包含！important 命令，以便您可以强制它们影响规则。

页眉块和小部件区域内容

1 个答案: