表格内定义的表格单元格的宽度不均匀，我不明白为什么？也为糟糕的编码实践道歉
fiddle :JsFiddle Link
这是 html。该表在 div class="mainstuff"
中定义<body>
<div id="maincontainer">
<div class="topbar">
<div class="logo">
Codeplayer
</div>
<div class="tabs">
<ul>
<li class="l">HTML</li>
<li class="l1">CSS</li>
<li class="l2">JS</li>
<li class="l3">Result</li>
</ul>
</div>
<div class="run">
<button id="but">Run</button>
</div>
</div>
<div class="clear"></div>
<div class="mainstuff">
<div class="row">
<div class="Html">HTML</div>
<div class="CSS">CSS</div>
<div class="JS">JS</div>
<div class="Result">Result</div>
</div>
</div>
</div>
</body>
</html>
这是相关的CSS。
.topbar {
background-color: #D0D5DB;
width: 100%;
height: 40px;
border-bottom-width: thick;
}
body {
margin: 0;
padding: 0;
}
.logo {
font-size: 1.8em;
font-weight: bold;
padding: 3px 2px;
float: left;
}
.run {
float: right;
margin-top: -5px;
padding: 6px 2px;
}
#but {
padding-left: 15px;
border-radius: 5px;
}
button {
}
ul {
list-style: none;
margin: 0;
}
.tabs {
margin: 0 auto;
width: 240px;
padding-top: 5px;
}
.l {
float: left;
border-color: #808080;
border-style: solid;
margin: 3px;
}
li:hover {
background-color: #808081;
}
.clear {
clear: both;
}
.mainstuff {
display: table;
width: 100%;
}
.Html {
display: table-cell;
height: 100vh;
margin: 0;
background-color: red;
}
.CSS {
display: table-cell;
height: 100vh;
margin: 0;
background-color: yellow;
}
.JS {
display: table-cell;
height: 100vh;
margin: 0;
background-color: blue;
}
.Result {
display: table-cell;
height: 100vh;
margin: 0;
width: auto;
background-color: green;
}
.l1 {
float: left;
border-color: #808080;
border-style: solid;
margin: 3px;
}
.l2 {
float: left;
border-color: #808080;
border-style: solid;
margin: 3px;
}
.l3 {
float: left;
border-color: #808080;
border-style: solid;
margin: 3px;
}
.row {
display: table-row;
}
最佳答案
关于html - Div 表格单元格的宽度不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25363959/