Question

谁能告诉我为什么这不会坐在中心？我想在1行上有2个项目，在另一个上有2个（它正在做），但两者都居中。我无法解决这个问题。提前谢谢！

<div class="cattopmobile">
  <h2><a href="/wallets">WALLETS</a></h2>
  <h2><a href="/bags">BAGS</a></h2>
  <h2><a href="/accessories">ACCESSORIES</a></h2>
  <h2><a style="border-right:none!important;" href="/travel">TRAVEL</a></h2>
</div>

CSS：

.cattopmobile h2 {
  text-align: center;
}

.cattopmobile {
  display: block;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  text-align: center;
}

.cattopmobile h2 a {
  display: inline-block;
  float: left;
  width: auto;
  text-align: center;
  color: #837b62;
  font-size: 1.25em;
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: #837b62;
  padding-right: 4%;
  padding-left: 4%;
  margin-bottom: 20px;
}

Answer 1

你漂浮在他们容器的左边。从float: left：

中删除.cattopmobile h2 a CSS规则

.cattopmobile h2 a {
    border-right: 1px solid #837b62;
    color: #837b62;
    display: inline-block;
    font-size: 1.25em;
    margin-bottom: 20px;
    padding: 0 4%;
    text-align: center;
}

请注意，我所做的其他更改不是必需的，但为了清楚起见，我已添加了这些更改。如果您想要每行2个链接，则还需要处理<h2>个元素。

另外，为什么要包装<h2>元素中的导航菜单？为什么不将<nav>元素与<ul>一起使用？

Answer 2

将h2标记设置为内联样式（不带浮点数），而不是它们的内部锚点.... h2用于位置... a的外观。

默认情况下，

h2标记是块元素，因此它们不会内联。你有点＆＃34;黑客攻击＆＃34; h2标签内的锚点。正确处理块级元素（h2）将是我的首选方法。

.cattopmobile h2 {
    display: inline-block;
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: #837b62;
    padding-right: 4%;
    padding-left: 4%;
    margin-bottom: 20px;
   text-align: center;
}
.cattopmobile h2 a {
  color: #837b62;
  font-size: 1.25em;
}

<强> Updated Fiddle

Answer 3

因为每行需要2个项目（行）
将宽度更改为.cattopmobile h2 a { width : 40% approx; float:left }中的40％而不是50％，因为边框等会超过50％并且您仍然不会获得每行2个元素。现在它应该工作。宽度自动分配宽度，并且由于元素是内联的，如果有足够的空间，则在行中推送更多元素。

Answer 4

IVCatalina。

您是要尝试移动到页面的其他部分还是转到完全不同的页面？好吧，如果你要访问你网页的不同部分，你需要拥有＆＃39;＃＆＃39;在它面前而不是斜线。如果您要访问完全不同的页面，则需要在页面中添加扩展名; htm，html，php，aspx，cs等，如果该文件的源与您尝试访问它的页面位于同一文件夹中，则不需要在开头使用斜杠。

希望这有帮助！

J Carter

链接不会居中

4 个答案: