Question

我正在使用的主题是自动将我的徽标调整到一定的大小。我已尝试在width: 100%;元素中添加.header .logo {来编辑css文件，如下面的代码所示：

Header
*/
.header_container {
  min-height: 40px;
}

.header {
  height: auto;
  position: static;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 101;
  background: #fff;
}
.header .header_top {
  padding: 0 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
  direction: ltr;
  background: #f6f6f6;
}
@media only screen and (min-width: 40.063em) {
  .header .header_top {
    padding: 10px 15px;
  }
}
.header .header_top > .row > .columns {
  padding: 0;
  min-height: 1px;
  height: 70px;
}
@media only screen and (min-width: 40.063em) {
  .header .header_top > .row > .columns {
    padding: 0 0.9375em;
  }
}
.header .logo {
  display: table;
  min-height: 1px;
    width: 100%;
}
.header .logo .logolink {
  display: table-cell;
  vertical-align: middle;
  max-width: 100%;
}
.header .logo .logoimg {
  display: inline-block;
  max-height: 40px;
}
}
@media only screen and (min-width: 40.063em) {
  .header .logo .logoimg {
    max-height: 70px;
  }
}

这使徽标看起来像我想要的方式，但现在我有很大的顶部和底部填充，我不知道如何把它们拿出来。 Print screen

此外，社交媒体图标显示低于徽标（它们应与徽标一致）。

有什么建议吗？

谢谢。

Answer 1

我无法对你给我的文件进行适当的模拟;我没有菜单和社交按钮的其余样式表，我也没有那些HTML（你只给我<?php?>标签）。但是，似乎唯一的问题是宽度为100％的.logo元素只是将这些元素推开，所以菜单按钮出现在上面的自己的行上，社交按钮出现在下面的各行上。

这可能是标题太高的唯一原因，因此填充问题应该自行消失。

因此，请删除您添加的行，并直接定位<img>标记，宽度远低于100％。

以下CSS似乎是必要的，以使图像适合您提供的容器大小：

header .logo .logoimg {
  width: 100%;
}

header.fixed .logo .logoimg {
  width: auto;
}

另外，将medium-4的孩子的<div class="row full-width-row">课程分别更改为medium-3，medium-6和medium-3。这给了标题（中等6）空间的六十二分之一，其他人各占25％。这就像你可以制作社交按钮一样小。

正确设置徽标大小+删除填充

1 个答案: