CSS设置显示：table-cell getting block

时间：2017-12-15 01:20:27

标签： html css

我想要一个SideMenu，它与内容的长度相同，但使用display：table-cell将导致display：block in firefox和chrome。为什么呢？

.back-branded {
  background: #900;
  padding-top: 200px;
}

.sideMenu {
  padding-left: 0;
  padding-right: 5px;
  margin-top: 10px;
}

a.list-group-item:hover {
  color: inherit;
  background: #fff;
  text-decoration: none;
}

.form-control {
  color: rgb(85, 85, 85);
  background: #eee;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.form-control:hover,
.input-group-addon:hover {
  color: rgb(85, 85, 85);
  text-decoration: none;
  background-color: #e1e1e1;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  cursor: pointer;
}

.container {
  background: #fcfdfd;
  border-style: solid;
  border-image: linear-gradient(to top right, #ddd 0%, #fff 50%) 1;
  width: auto;
  margin-left: 5px;
  margin-right: 5px;
}

.content {
  padding-right: 0;
  margin-top: 10px;
  padding-left: 5px;
}

.col-md-6,
.col-md-12 {
  padding: 5px;
}

.row {
  margin-left: -5px;
  margin-right: -5px;
}

.btn {
  border: 1px solid #c5c5c5;
  border-radius: 3px;
  color: #454545;
  background: #f6f6f6;
}

.sideMenu,
.content {
  display: table-cell;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<body>
  <div class="col-md-12" style="display:table;">
    <div class="back-branded" style="display:table-row;"></div>
    <div style="display:table-row;">
      <div class="col-md-2 sideMenu" style="overflow: hidden;align-self:stretch;display:table-cell;">
        <div class="list-group">
          <div class="list-group-item" id="back-btn">
            <div class="input-group">
              <span class="input-group-addon glyph" id="basic-addon1">&#xE225;</span>
              <a class="form-control" aria-describedby="basic-addon1">Center verlassen</a>
            </div>
          </div>
          <div class="list-group-item" id="plan-btn">
            <div class="input-group">
              <span class="input-group-addon glyph" id="basic-addon1">&#xE046;</span>
              <a class="form-control" aria-describedby="basic-addon1">Dienstpläne</a>
            </div>
          </div>
          <div class="list-group-item" id="finance-btn">
            <div class="input-group">
              <span class="input-group-addon glyph" id="basic-addon2">&#xE030;</span>
              <a class="form-control" aria-describedby="basic-addon2">Abrechnung</a>
            </div>
          </div>
          <div class="list-group-item" id="user-btn">
            <div class="input-group">
              <span class="input-group-addon glyph" id="basic-addon2">&#xE004;</span>
              <a class="form-control" aria-describedby="basic-addon2">Benutzer</a>
            </div>
          </div>
          <span class="list-group-item" style="align-self:stretch"></span>
        </div>
      </div>
      <div class="col-md-10 content">
        <div class="row">
          <div class="col-md-12">
            <div class="container">
              <!--Hier kommt eine ganz lange Liste-->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

到JSFiddle：https://jsfiddle.net/pickbreaker/fas55qfs/1/#&togetherjs=D4V6y9nTm9

对象的检查长截图： https://i.stack.imgur.com/KgHS4.png https://i.stack.imgur.com/WwKh7.png

2 个答案:

答案 0 :(得分：0)

您的表格单元格也在那里，也在Firefox中（display:block被覆盖），并且它与其他单元格一样高。在我的片段中，我为表格单元分配了一个黄色背景，所以你可以看到它（加上我在那里写了一些文字）

但是你正在使用Bootstrap类来处理它里面的元素，这没什么意义...... 

.back-branded {
  background: #900;
  padding-top: 200px;
}

.sideMenu {
  padding-left: 0;
  padding-right: 5px;
  margin-top: 10px;
}

a.list-group-item:hover {
  color: inherit;
  background: #fff;
  text-decoration: none;
}

.form-control {
  color: rgb(85, 85, 85);
  background: #eee;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.form-control:hover,
.input-group-addon:hover {
  color: rgb(85, 85, 85);
  text-decoration: none;
  background-color: #e1e1e1;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  cursor: pointer;
}

.container {
  background: #fcfdfd;
  border-style: solid;
  border-image: linear-gradient(to top right, #ddd 0%, #fff 50%) 1;
  width: auto;
  margin-left: 5px;
  margin-right: 5px;
}

.content {
  padding-right: 0;
  margin-top: 10px;
  padding-left: 5px;
}

.col-md-6,
.col-md-12 {
  padding: 5px;
}

.row {
  margin-left: -5px;
  margin-right: -5px;
}

.btn {
  border: 1px solid #c5c5c5;
  border-radius: 3px;
  color: #454545;
  background: #f6f6f6;
}

.sideMenu,
.content {
  display: table-cell;
  background: #ffb;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<body>
  <div class="col-md-12" style="display:table;">
    <div class="back-branded" style="display:table-row;"></div>
    <div style="display:table-row;">
      <div class="col-md-2 sideMenu" style="overflow: hidden;align-self:stretch;display:table-cell;">
        <div class="list-group">
          <div class="list-group-item" id="back-btn">
            <div class="input-group">
              <span class="input-group-addon glyph" id="basic-addon1">&#xE225;</span>
              <a class="form-control" aria-describedby="basic-addon1">Center verlassen</a>
            </div>
          </div>
          <div class="list-group-item" id="plan-btn">
            <div class="input-group">
              <span class="input-group-addon glyph" id="basic-addon1">&#xE046;</span>
              <a class="form-control" aria-describedby="basic-addon1">Dienstpläne</a>
            </div>
          </div>
          <div class="list-group-item" id="finance-btn">
            <div class="input-group">
              <span class="input-group-addon glyph" id="basic-addon2">&#xE030;</span>
              <a class="form-control" aria-describedby="basic-addon2">Abrechnung</a>
            </div>
          </div>
          <div class="list-group-item" id="user-btn">
            <div class="input-group">
              <span class="input-group-addon glyph" id="basic-addon2">&#xE004;</span>
              <a class="form-control" aria-describedby="basic-addon2">Benutzer</a>
            </div>
          </div>
          <span class="list-group-item" style="align-self:stretch"></span>
        </div>
      </div>
      <div class="col-md-10 content">
        <div class="row">
          <div class="col-md-12">
            <div class="container">
              Hier kommt eine ganz lange Liste, ganz, ganz lang...
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

答案 1 :(得分：0)

我发现了问题。显示：table-cell不能使用float：left。所以我必须找到一个解决方法

相关问题
最新问题