格式HTML表格元素

这看起来确实很微不足道，但我无法达到预期效果。我试图在工具箱中添加一个新元素（一个分区内的表格）。但新添加的元素不一致。格式HTML表格元素

Pass-through和Window query保持重叠，如下所示。

HTML表

<div style="float: left;" class="toolbox" id="toolbox"> 
    <table> 
    ... 
    <tr> 
     <td> 
      <label class="col-md-4 control-label">Simple Query</label> 
     </td> 
     <td> 
      <div class="squery" id="rId"></div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <label class="col-md-4 control-label">Pass-through</label> 
     </td> 
     <td> 
      <div class="nElem" id="lId"></div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <label class="col-md-4 control-label">Window Query</label> 
     </td> 
     <td> 
      <div class="wquery" id="wId"></div> 
     </td> 
    </tr> 
    ...

CSS类nElem为直通

的类的其它元件，简单的查询，窗口查询，都是一样的传递课程。唯一的区别是颜色。

.nElem { 
    border: 1px solid #346789; 
    box-shadow: 2px 2px 19px #aaa; 
    -o-box-shadow: 2px 2px 19px #aaa; 
    -webkit-box-shadow: 2px 2px 19px #aaa; 
    -moz-box-shadow: 2px 2px 19px #aaa; 
    -moz-border-radius: 0.5em; 
    border-radius: 0.5em; 
    opacity: 0.8; 
    width: 120px; 
    height: 72px; 
    line-height: 80px; 
    cursor: pointer; 
    text-align: center; 
    z-index: 20; 
    position: absolute; 
    background-color: darkslateblue; 
    color: black; 
    font-family: helvetica, sans-serif; 
    padding: 0.5em; 
    font-size: 0.9em; 
    -webkit-transition: -webkit-box-shadow 0.15s ease-in; 
    -moz-transition: -moz-box-shadow 0.15s ease-in; 
    -o-transition: -o-box-shadow 0.15s ease-in; 
    transition: box-shadow 0.15s ease-in; 
}

工具箱（司在其中创建表）类

.toolbox { 
    margin: 0 auto; 
    margin-left: 10px; 
    width: 230px; 
    height:850px; 
    padding: 20px; 
    font-family: "Helvetica"; 
    font-size: small; 
    background: #f4f4f4; 
    border-radius: 3px; 
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3); 
}

来源

2016-09-29 Nayantara Jeyaraj

您的代码是不够的，了解这正是错误的。但我敢肯定，主要问题是position: absolute;对.nElem,.squery,.wquery等造成的。所以删除这个属性，再看看。我试图解决您的问题就在这里：http://codepen.io/g1un/pen/ozZNkL

.nElem { 
    /*position: absolute;*/ 
}

来源

2016-09-29 06:55:39 g1un

谢谢。这工作。但是，我想知道的是为什么'position：absolute;'不影响其他元素（简单查询，窗口查询等），但仅影响传递？ –

@TaraWilfred也许你为某些'labels'设置了不同的'height'。整个代码可以帮助回答这个问题。 – g1un

除颜色外，所有属性都完全相同。 –

格式HTML表格元素

回答

相关问题