时间戳

首页 > 解决方案 > 如何水平对齐两列？

html - 如何水平对齐两列？

问题描述

列未水平对齐：
柱子

问题：https ://imgur.com/9m2R42R

我想在我的博客中创建 2 个专栏：

  1. 一个是带有文章的博客主页
  2. 另一个是菜单。

我决定通过 CSS 来做到这一点，因为我不知道如何做到这一点:)（看看下面的代码）。

至于我的 HTML，我试图让它尽可能干净（看看下面的代码）。

如何将第二列与另一列对齐？

似乎有一些大约 20px 的填充，但它甚至不存在于我的整个代码中。我向上帝发誓，我不知道该怎么办。

.column {
  float: left;
  padding-top: 1%;
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}


/* Left Column (main) */

.column.main {
  width: 76%;
  background-color: grey;
  padding-bottom: 1%;
  padding-right: 1%;
  padding-left: 1%;
}


/* Right Column (menu) */

.column.menu {
  width: 20%;
  background-color: lightgrey;
  padding-bottom: 1%;
  padding-right: 1%;
  padding-left: 1%;
}
<div class="column main">
  <div class="card">
    Content
  </div>
</div>

<div class="column menu">
  <div class="card">
    <h3 align="center">Main Menu</h3>
    <li>Main Menu</li>
    <li>English</li>
    <li>German</li>
    <li>Spanish</li>
  </div>
</div>

标签： htmlcss

解决方案

您可以通过将所有边距设置为零来解决此问题。

* {
   margin: 0;
   padding: 0;
}

因为某些 HTML 元素具有预定义的边距（body、h1 to h6、p、fieldset、form、ul、ol、dl、dir、menu和）。blockquotedd

推荐阅读