css - 试图围绕一个链接制作一个特定大小的盒子 - 不工作

Question

试图在 Wordpress 中的链接菜单周围添加一个框。到目前为止，我已经得到了这个 - 如果我是正确的，它应该是一个 150px x 50px 的盒子。但是，虽然边距、填充等都可以工作，但它不起作用。为什么会这样？在最近的 CSS 中，宽度是否已被弃用？

.menu-header .menu-item {
    display: inline !important;
    margin: 0px 50px !important;
    border-style: solid !important;
    border-width: 2px !important;
    width: 150px !important;
    height: 50px !important;
    background-color: #EDEDED !important;
   }

Answer 1

删除display: inline- 这将导致设置大小的问题。元素需要是块级才能指定大小。

此外，CSS 可以简化：

.menu-header .menu-item{
    margin: 0 50px;
    border: 2px solid #000;
    width: 150px;
    height: 50px;
    background: #EDEDED;
}​

Answer 2

display:inline 和 width 150px 相互碰撞。内联元素每次都具有其内容的宽度。

当您确实需要内联或阻止时，您可以将显示设置为内联块。