Question

我正在修改Wordpress Responsive的儿童主题。我想把我的H1帖子/页面标题放在一个盒子里，并且已经成功了。

问题是......我需要将Header的左侧填充设置为15px，每当我这样做时，标题所在的框变得太宽。

我将框设置为width: 100%;我需要使用百分比，因为我正在修改响应主题。但是因为我希望内部元素（H1）带有padding-left: 15px; ......所有这一切都是宽度100％+ 15px，这是我不想要的。

我正在尝试将盒子（或里面的H1）设置为100％减去15px ...请告诉我，这是否可能？

...不幸的是，当我使用Firebug查看该页面时，我发现h1 { }和另一个命令.entry-title, .post-title { }在HTML中似乎不是分开的，如下所示：< / p>

<h1 class="entry-title post-title">Header!</h1>

我尝试将两个CSS元素中的一个设置为宽度100％，另一个设置为-15px，但无效。我还尝试了一些基本的z-index涉及，将一个设置为z-index: 99;，另一个设置为z-index: 1;，这也不起作用。

感谢您阅读

Answer 1

您正在寻找的是CSS中的calc功能。根据您的具体情况，您需要执行以下操作：

h1 {
    width: calc(100% - 15px);
}

也就是说，提供我正确理解你的问题。以上操作是将h1标记的宽度设置为其父元素的100％，减去15px。

Answer 2

我会尝试box-sizing: border-box;。

h1 { box-sizing: border-box; }