向表中添加文本会混淆对齐HTML

时间：2016-01-20 10:34:12

标签： html css

我正在尝试为我的网站创建一种日期/时间选择。

的CSS：

.top {
    background-color: #82ceff !important;
}

.time-table-block{
    margin-left: -4px;
    margin-right: -4px;
    margin-top : -4px;
    margin-bottom : -4px;
    background-color: #d6d6d6;
    width: 12.5%;
    height: 40px;
    display: inline-table;
    text-align: center;
    border:  1px #666666 solid;
}

.time-table-block:hover{
    background-color:  #b9b7b7;
}

HTML：

<div id="time-table" >

     <div class="time-table-block white-text top">Dagen</div>
     <div class="time-table-block white-text top"><b>ma</b></div>
     <div class="time-table-block white-text top"><b>di</b></div>
     <div class="time-table-block white-text top"><b>wo</b></div>
     <div class="time-table-block white-text top"><b>do</b></div>
     <div class="time-table-block white-text top"><b>vr</b></div>
     <div class="time-table-block white-text top"><b>za</b></div>
     <div class="time-table-block white-text top"><b>zo</b></div>

     <div class="time-table-block"></div>
     <div id="ma-morning" class="time-table-block"></div>
     <div id="di-morning" class="time-table-block"></div>
     <div id="wo-morning" class="time-table-block"></div>
     <div id="do-morning" class="time-table-block"></div>
     <div id="vr-morning" class="time-table-block"></div>
     <div id="za-morning" class="time-table-block"></div>
     <div id="zo-morning" class="time-table-block"></div>

     <div class="time-table-block"></div>
     <div id="ma-noon" class="time-table-block"></div>
     <div id="di-noon" class="time-table-block"></div>
     <div id="wo-noon" class="time-table-block"></div>
     <div id="do-noon" class="time-table-block"></div>
     <div id="vr-noon" class="time-table-block"></div>
     <div id="za-noon" class="time-table-block"></div>
     <div id="zo-noon" class="time-table-block"></div>     

     <div class="time-table-block"></div>
     <div id="ma-evening" class="time-table-block"></div>
     <div id="di-evening" class="time-table-block"></div>
     <div id="wo-evening" class="time-table-block"></div>
     <div id="do-evening" class="time-table-block"></div>
     <div id="vr-evening" class="time-table-block"></div>
     <div id="za-evening" class="time-table-block"></div>
     <div id="zo-evening" class="time-table-block"></div>

</div>

到目前为止一切看起来都很好。我可以毫无问题地向顶部单元格添加文本，并且没有对齐问题。

现在问题： 我也试图在最左边的列中添加文本（请参阅jsfiddle以更清楚地看到它）但这会导致对齐遍布整个地方。 我试图删除我能找到的所有边距。我也尝试过使用填充等，但我似乎无法解决问题。任何帮助将不胜感激

＆＃13;
＆＃13; 
.top{
    background-color: #82ceff !important;
}

.time-table-block{
    margin-left: -4px;
    margin-right: -4px;
    margin-top : -4px;
    margin-bottom : -4px;
    background-color: #d6d6d6;
    width: 12.5%;
    height: 40px;
    display: inline-table;
    text-align: center;
    border:  1px #666666 solid;
}

.time-table-block:hover{
    background-color:  #b9b7b7;
}
＆＃13; 
<div id="time-table" >
    
    <p>Good</p>
    
    <div class="time-table-block white-text top">Dagen</div>
    <div class="time-table-block white-text top"><b>ma</b></div>
    <div class="time-table-block white-text top"><b>di</b></div>
    <div class="time-table-block white-text top"><b>wo</b></div>
    <div class="time-table-block white-text top"><b>do</b></div>
    <div class="time-table-block white-text top"><b>vr</b></div>
    <div class="time-table-block white-text top"><b>za</b></div>
    <div class="time-table-block white-text top"><b>zo</b></div>
                     
    <div class="time-table-block"></div>
    <div id="ma-morning" class="time-table-block"></div>
    <div id="di-morning" class="time-table-block"></div>
    <div id="wo-morning" class="time-table-block"></div>
    <div id="do-morning" class="time-table-block"></div>
    <div id="vr-morning" class="time-table-block"></div>
    <div id="za-morning" class="time-table-block"></div>
    <div id="zo-morning" class="time-table-block"></div>
                        
    <div class="time-table-block"></div>
    <div id="ma-noon" class="time-table-block"></div>
    <div id="di-noon" class="time-table-block"></div>
    <div id="wo-noon" class="time-table-block"></div>
    <div id="do-noon" class="time-table-block"></div>
    <div id="vr-noon" class="time-table-block"></div>
    <div id="za-noon" class="time-table-block"></div>
    <div id="zo-noon" class="time-table-block"></div>
                       
                        
    <div class="time-table-block"></div>
    <div id="ma-evening" class="time-table-block"></div>
    <div id="di-evening" class="time-table-block"></div>
    <div id="wo-evening" class="time-table-block"></div>
    <div id="do-evening" class="time-table-block"></div>
    <div id="vr-evening" class="time-table-block"></div>
    <div id="za-evening" class="time-table-block"></div>
    <div id="zo-evening" class="time-table-block"></div>
                        
</div>
                    
                    
                    
<div id="time-table" >
    <p>Bad</p>      
    <div class="time-table-block white-text top">Dagen</div>
    <div class="time-table-block white-text top"><b>ma</b></div>
    <div class="time-table-block white-text top"><b>di</b></div>
    <div class="time-table-block white-text top"><b>wo</b></div>
    <div class="time-table-block white-text top"><b>do</b></div>
    <div class="time-table-block white-text top"><b>vr</b></div>
    <div class="time-table-block white-text top"><b>za</b></div>
    <div class="time-table-block white-text top"><b>zo</b></div>
                     
    <div class="time-table-block">i want</div>
    <div id="ma-morning" class="time-table-block"></div>
    <div id="di-morning" class="time-table-block"></div>
    <div id="wo-morning" class="time-table-block"></div>
    <div id="do-morning" class="time-table-block"></div>
    <div id="vr-morning" class="time-table-block"></div>
    <div id="za-morning" class="time-table-block"></div>
    <div id="zo-morning" class="time-table-block"></div>
    
    <div class="time-table-block">to add</div>
    <div id="ma-noon" class="time-table-block"></div>
    <div id="di-noon" class="time-table-block"></div>
    <div id="wo-noon" class="time-table-block"></div>
    <div id="do-noon" class="time-table-block"></div>
    <div id="vr-noon" class="time-table-block"></div>
    <div id="za-noon" class="time-table-block"></div>
    <div id="zo-noon" class="time-table-block"></div>
    
                        
    <div class="time-table-block">text here</div>
    <div id="ma-evening" class="time-table-block"></div>
    <div id="di-evening" class="time-table-block"></div>
    <div id="wo-evening" class="time-table-block"></div>
    <div id="do-evening" class="time-table-block"></div>
    <div id="vr-evening" class="time-table-block"></div>
    <div id="za-evening" class="time-table-block"></div>
    <div id="zo-evening" class="time-table-block"></div>
                        
</div>
＆＃13;
＆＃13;
＆＃13;

的jsfiddle： https://jsfiddle.net/a4ebbmzf/13/

1 个答案:

答案 0 :(得分：0)

你应该真的使用table。但如果你真的想用div ...

来做

您需要将其定义为css中的一个表，而不是单个表的负载。将外部div设置为display:table，将行包裹在display:table-cell的div中，并将各个单元格设置为display:table-cell。

＆＃13;
＆＃13; 
.top {
  background-color: #82ceff !important;
}

.time-table {
  display: table;
}

.time-table-row {
  display: table-row;
}

.time-table-block {
  background-color: #d6d6d6;
  width: 12.5%;
  height: 40px;
  text-align: center;
  border: 1px #666666 solid;
  display: table-cell;
}

.time-table-block:hover {
  background-color: #b9b7b7;
}
＆＃13; 
<div id="time-table">

    <p>Good</p>
    <div class="time-table-row">
        <div class="time-table-block white-text top">Dagen</div>
        <div class="time-table-block white-text top"><b>ma</b></div>
        <div class="time-table-block white-text top"><b>di</b></div>
        <div class="time-table-block white-text top"><b>wo</b></div>
        <div class="time-table-block white-text top"><b>do</b></div>
        <div class="time-table-block white-text top"><b>vr</b></div>
        <div class="time-table-block white-text top"><b>za</b></div>
        <div class="time-table-block white-text top"><b>zo</b></div>
    </div>

    <div class="time-table-row">
        <div class="time-table-block"></div>
        <div id="ma-morning" class="time-table-block"></div>
        <div id="di-morning" class="time-table-block"></div>
        <div id="wo-morning" class="time-table-block"></div>
        <div id="do-morning" class="time-table-block"></div>
        <div id="vr-morning" class="time-table-block"></div>
        <div id="za-morning" class="time-table-block"></div>
        <div id="zo-morning" class="time-table-block"></div>
    </div>

    <div class="time-table-row">
        <div class="time-table-block"></div>
        <div id="ma-noon" class="time-table-block"></div>
        <div id="di-noon" class="time-table-block"></div>
        <div id="wo-noon" class="time-table-block"></div>
        <div id="do-noon" class="time-table-block"></div>
        <div id="vr-noon" class="time-table-block"></div>
        <div id="za-noon" class="time-table-block"></div>
        <div id="zo-noon" class="time-table-block"></div>
    </div>

    <div class="time-table-row">
        <div class="time-table-block"></div>
        <div id="ma-evening" class="time-table-block"></div>
        <div id="di-evening" class="time-table-block"></div>
        <div id="wo-evening" class="time-table-block"></div>
        <div id="do-evening" class="time-table-block"></div>
        <div id="vr-evening" class="time-table-block"></div>
        <div id="za-evening" class="time-table-block"></div>
        <div id="zo-evening" class="time-table-block"></div>
    </div>
</div>



<div id="time-table">
    <p>Bad</p>
    <div class="time-table-row">
        <div class="time-table-block white-text top">Dagen</div>
        <div class="time-table-block white-text top"><b>ma</b></div>
        <div class="time-table-block white-text top"><b>di</b></div>
        <div class="time-table-block white-text top"><b>wo</b></div>
        <div class="time-table-block white-text top"><b>do</b></div>
        <div class="time-table-block white-text top"><b>vr</b></div>
        <div class="time-table-block white-text top"><b>za</b></div>
        <div class="time-table-block white-text top"><b>zo</b></div>
    </div>

    <div class="time-table-row">
        <div class="time-table-block">i want</div>
        <div id="ma-morning" class="time-table-block"></div>
        <div id="di-morning" class="time-table-block"></div>
        <div id="wo-morning" class="time-table-block"></div>
        <div id="do-morning" class="time-table-block"></div>
        <div id="vr-morning" class="time-table-block"></div>
        <div id="za-morning" class="time-table-block"></div>
        <div id="zo-morning" class="time-table-block"></div>
    </div>

    <div class="time-table-row">
        <div class="time-table-block">to add</div>
        <div id="ma-noon" class="time-table-block"></div>
        <div id="di-noon" class="time-table-block"></div>
        <div id="wo-noon" class="time-table-block"></div>
        <div id="do-noon" class="time-table-block"></div>
        <div id="vr-noon" class="time-table-block"></div>
        <div id="za-noon" class="time-table-block"></div>
        <div id="zo-noon" class="time-table-block"></div>
    </div>

    <div class="time-table-row">
        <div class="time-table-block">text here</div>
        <div id="ma-evening" class="time-table-block"></div>
        <div id="di-evening" class="time-table-block"></div>
        <div id="wo-evening" class="time-table-block"></div>
        <div id="do-evening" class="time-table-block"></div>
        <div id="vr-evening" class="time-table-block"></div>
        <div id="za-evening" class="time-table-block"></div>
        <div id="zo-evening" class="time-table-block"></div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题