html - 为什么我的 anchor 标签没有回流？

Question

我在开发我的新网站时遇到了一些我想不通的问题。这是链接:

http://www.adamabrams.com/aadc/

当我将浏览器调整为“移动宽度”时，它比我网站菜单正下方的一小排椭圆形“标签”的宽度窄，我希望标签重新排列成两行(或多达需要)。相反，它们固执地保持在一行中并突出在窗口的右侧。

我没有给封闭的 div 一个固定的高度...我知道这一定很简单，但我很难过!

这是 HTML:

<main class="content" itemtype="http://schema.org/Blog" itemscope="itemscope" itemprop="mainContentOfPage" role="main">
<div class="post_tags">
<a class="tagintro" href="#">Select area of expertise:</a>
<a class="database" title="database projects" href="http://adamabrams.com/aadc/tag/database/">database</a>
<a class="ecommerce" title="ecommerce projects" href="http://adamabrams.com/aadc/tag/ecommerce/">ecommerce</a>
<a class="mobile" title="mobile projects" href="http://adamabrams.com/aadc/tag/mobile/">mobile</a>
<a class="website" title="website projects" href="http://adamabrams.com/aadc/tag/website/">website</a>
</div>

...这里是所有相关的 CSS，我认为:

/* TAG BUTTONS */

/* Styling of the buttons, everywhere */
.entry-tags a, .post_tags a {
    color: #3D3D3D;
    font-weight: bold;
    background-color: #EECE88;
    padding: .35em .5em;
    border-radius: .7em;
    -moz-border-radius: .7em;
    -webkit-border-radius: .7em;
}

.entry-tags a:hover, .post_tags a:hover {
    color: black;
    background-color: orange;
}

/* TAGS "HEADER" ON TAG.PHP PAGE */

/* Layout of buttons area */
.post_tags {
    text-align: center;
    margin-bottom: 2em;
}

/* Spacing between buttons */
.post_tags a {
    margin-right: 1em;
}

.post_tags a:first-child,
.post_tags a:last-child {
    margin-right: 0;
}

/* Currently displayed tag */
body.tag-ecommerce a.ecommerce,
body.tag-database a.database,
body.tag-mobile a.mobile,
body.tag-website a.website {
    color: black;
    background-color: orange;
}

a.tagintro, a.tagintro:hover {
    background-color: transparent;
    color: white;
}

欢迎提出任何想法或建议!

谢谢， 亚当

Answer 1

我明白你的意思了。获得您想要实现的目标的最佳方法是在所需的断点处更改元素的宽度和边距。

因此，对于您的“媒体宽度”，您可以将类设置为重新调整大小。通过这样做，元素将自然地沿着文档向下流动。

例如:

@media only screen and (max-width: 480px) { /* Your break-point for mobile */

  .ecommerce,
  .database,
  .mobile,
  .website{
      width: 48%;
      margin-left: 1%;
      margin-right: 1%;
  }
}

或一些对您的设计有意义的类似测量。