如何在一行CSS中对齐两列

Question

我正在尝试将两列按钮彼此相邻对齐，以用作到其他页面的链接。我让他们处于他们的位置，但是他们被压扁了。参见下面的代码。我也想创建一个响应式布局，但它是这样的简洁形式。

定位不是我的强项，所以请多加建议。

section {
    background-color: #ede6c1;
    padding: 15px;
    margin: auto;
    text-align: center;
}

p {
    font-family: "Times New Roman", Times, serif;
    color: #080000;
}

article {
    border: black;
    width: 100%;
    height: 100%;
    padding: 10px;
    margin: 10px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    box-sizing: border-box;
    margin: 0;
    font-family: Arial;
}


/* two equal columns that floats next to each other */

.row {
    display: -ms-flexbox;
    /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap;
    /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
    justify-content: center;
}

.column {
    -ms-flex: 25%;
    /* IE10 */
    flex: 20%;
    max-width: 20%;
    padding: 0 4px;
    margin: 30px;
}

.menu-button {
    background-color: rgba(85, 100, 83, 0.8);
    padding: 20px 0;
    font-size: 30px;
    margin: 10px;
    width: 200px;
    min-width: 100px;
    border-radius: 25px;
    box-shadow: 5px 5px 5px rgba(71, 69, 69, 0.787);
}

.menu-button:hover {
    width: 200px;
    height: 40%;
    box-shadow: 1px 1px 1px rgba(71, 69, 69, 0.787);
    color: black;
}

a {
    color: black;
    text-decoration: none;
}

a:hover {
    color: rgba(71, 69, 69, 0.787);
    text-decoration: none;
}


/* Responsive layout - makes a two column-layout instead of four columns */

@media screen and (max-width: 800px) {
    .column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
    .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}

 <section>
        <article>
            <h1>Seattle Colours</h1>
            <div class="row">
                <div class="column">

                    <a class="menu-button" href="../Wood-Type/index-wood-type.html" role="button" style="width:100%">Wood
                     type</a>


                    <a class="menu-button" href="../Wood-Type/.html" role="button" style="width:100%">Specification</a>

                    <a class="menu-button" href="../Wood-Type/.html" role="button" style="width:100%">Pricing</a>

                </div>

                <div class="column">
                    <a class="menu-button" href="../Wood-Type/.html" role="button" style="width:100%">News</a>


                    <a class="menu-button" href="../Wood-Type/.html" role="button" style="width:100%">FAQ</a>

                    <a class="menu-button" href="../Wood-Type/index-wood-type.html" role="button" style="width:100%">Images</a>

                </div>
            </div>
        </article>
    </section>

Answer 1

每个column应该具有相同的flex-basis，并且由于要两列，因此50％flex-basis可以正常工作。我还使用下面的flex速记来告诉浏览器，当允许flex-grow时不允许flex-shrink，这与父级（flex-wrap）上的.row声明非常匹配。

这可以为您提供大部分帮助，但是您的按钮仍显示为inline，这导致它们以不希望的方式堆叠并且宽度不一致。将它们设置为display: block可以解决这两个问题，并允许您删除一直未遵循的width: 100%。

我删除了自适应改编，因为它们干扰了StackOverflow上的演示。

section {
  background-color: #ede6c1;
  padding: 15px;
  text-align: center;
}

article {
  padding: 10px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  justify-content: center;
}

.column {
  -ms-flex: 50%; /* IE10 */
  flex: 0 1 auto;
  margin: 30px;
}

.menu-button {
  display: block;
  box-sizing: border-box;
  background-color: rgba(85, 100, 83, 0.8);
  padding: 20px 0;
  font-size: 30px;
  margin: 10px 0;
  width: 200px;
  border-radius: 25px;
  box-shadow: 5px 5px 5px rgba(71, 69, 69, 0.787);
}

.menu-button:hover {
  box-shadow: 1px 1px 1px rgba(71, 69, 69, 0.787);
  color: black;
}

a {
  color: black;
  text-decoration: none;
}

a:hover {
  color: rgba(71, 69, 69, 0.787);
  text-decoration: none;
}

<section>
  <article>
    <h1>Seattle Colours</h1>
    <div class="row">
      <div class="column">
        <a class="menu-button" href="../Wood-Type/index-wood-type.html" role="button">Wood type</a>
        <a class="menu-button" href="../Wood-Type/.html" role="button">Specification</a>
        <a class="menu-button" href="../Wood-Type/.html" role="button">Pricing</a>
      </div>

      <div class="column">
        <a class="menu-button" href="../Wood-Type/.html" role="button">News</a>
        <a class="menu-button" href="../Wood-Type/.html" role="button">FAQ</a>
        <a class="menu-button" href="../Wood-Type/index-wood-type.html" role="button">Images</a>
      </div>
    </div>
  </article>
</section>

Answer 2

将“菜单按钮”上的显示属性设置为“ flex”。这是小提琴https://jsfiddle.net/7c1bfz3u/

menu-button {
    background-color: rgba(85, 100, 83, 0.8);
    padding: 20px 0;
    font-size: 20px;
    margin: 10px;
    width: 200px;
    display:flex;
    padding:20px;
    min-width: 100px;
    border-radius: 25px;
    box-shadow: 5px 5px 5px rgba(71, 69, 69, 0.787);
}