我有以下html代码:



    .container {
        display: table;
        width: 100%;
        height: 100%;
      }

      .menu-container {
        width: 150px;
        height: 100%;
        background: #1b1b1b;
        color: #fff;
        display:table-cell;
      }

      .menu-container h1 {
        margin: 0px;
        width: 100%;
        padding: 5px 0px 5px 15px;
        background: #171717;
        font-weight: 600;
      }

      .main-container {
        width: auto;
        display:table-cell;
        box-shadow: -10px 0px 40px -10px #000000;
      }

    .container-header {
          width: 100%;
          background: red;
       }

<div class="container">
  <div class="menu-container">
    <h1>Browse</h1>
    <menu-container></menu-container>
  </div>
  <div class="main-container">
    <div>
      <div class="container-header">some text</div>
      random text
    </div>
  </div>
</div>





这里看起来如何:



如您所见,“某些文本”元素之前有一个空格。我不希望有多余的空间,我希望元素从其容器的顶部开始。我尝试了一些技巧,例如margin-top:-Xpx,但是没有用。我怎样才能解决这个问题?

最佳答案

这是你想要的吗?

只需在display:flex上使用container



.container {
  display: table;
  width: 100%;
  height: 100%;
  display:flex;
}

.menu-container {
  width: 150px;
  height: 100%;
  background: #1b1b1b;
  color: #fff;
  display: table-cell;
}

.menu-container h1 {
  margin: 0px;
  width: 100%;
  padding: 5px 0px 5px 15px;
  background: #171717;
  font-weight: 600;
}

.main-container {
  width: 100%;
  display: table-cell;
  box-shadow: -10px 0px 40px -10px #000000;
}

.container-header {
  width: 100%;
  background: red;
}

<div class="container">
  <div class="menu-container">
    <h1>Browse</h1>
    <menu-container></menu-container>
  </div>
  <div class="main-container">
    <div>
      <div class="container-header">some text</div>
      random text
    </div>
  </div>
</div>

10-05 20:56
查看更多