为什么我的锚标签没有重排？

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%;
  }
}

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