Question

如果您认为我的CSS错误，任何正确的HTML代码都会有所帮助。

我已附上屏幕截图。

问题：绿框内的红框。我无法减小RED盒子的高度，并且在每一行内都能装入绿色盒子。尝试了很多但没有成功。

如果我最小化或最大化浏览器，

Box应保持在同一位置。现在工作正常。

HTML

<table id="main-table" class="table" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td class="small" colspan="1" rowspan="1"></td>
                <td colspan="3" rowspan="1">
                    <div>
                        <span >JavaScript Basics</span>
                        <button class="destroy"></button>
                    </div>
                </td>
                <td class="small" colspan="1" rowspan="1">24</td>
            </tr>
        </tbody>
    </table>

CSS

#main-table {
position: relative;
    font-size: 12pt;
    font-family: "Comic Sans MS";
}

#main-table tr td{

    padding: 3.6pt 0pt 3.6pt 3.6pt;
    vertical-align:middle;
    border-width: 1pt;
    border-color: #999999;
    border-style: dashed;
    height: 20pt;
}

button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 100%;
    appearance: none;
}

button,
input[type="checkbox"] {
    outline: none;
}

.hidden {
    display: none;
}

#main-table tr .destroy {
       background-color: green;
    display: none;
    position: absolute;
    right: 50px;
    width: 40px;
    /*height: 30px; */
    margin: auto 0;
    font-size: 35px;
    color: #cc9a9a;
    margin-top: -40px;
    transition: color 0.2s ease-out;
}

#main-table tr .destroy:hover {
    color: #af5b5e;
}

#main-table tr .destroy:after {
    content: '×';
    background-color: red;
}

#main-table tr:hover .destroy {
    display: block;
}

由于

Answer 1

喜欢这个？ https://jsfiddle.net/8sdtv3qj/ 我改变的只是

font-size: 25px;
top: 44px;
left: 10px;

Answer 2

CSS 中的一点变化将帮助您实现您所寻求的目标。

为了更好地了解，请参阅JSFiddle

更改 CSS 代码：

#main-table tr td {
  padding: 3.6pt 0pt 3.6pt 3.6pt;
  vertical-align: middle;
  border-width: 1pt;
  position: relative; /* Added */
  border-color: #999999;
  border-style: dashed;
  height: 20pt;
}
#main-table tr .destroy {
 background-color: green;
 display: none;
 position: absolute;
 top: 0;
 left: 10px;
 width: 40px;
 height: 100%;  /* Added */
 margin: auto 0;
 font-size: 35px;
 color: #cc9a9a;
 transition: color 0.2s ease-out;}

#main-table tr .destroy::after {  /* Added Most of the properties */
   content: '×';
   background-color: red;
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 65%;
   line-height: 33px;
   margin: 0 auto;
   display: block;
   right: 0;
}

此外，您需要做的更多更改是使用 CSS 。

Answer 3

font-size #main-table tr .destroy与#main-table tr td身高相同。即height: 20pt;（font-size: 20pt;的{{1}}）。并移除#main-table tr .destroy并向其提供margin。

将top:0提交给position: relative;

<强> Updated working Fiddle

Answer 4

What is css content property

见这个例子：

的

的
#main-table tr:hover .destroy { display: block; padding: 10px; // change added font-size: 24px; // change added }

的

#main-table {
position: relative;
    font-size: 12pt;
    font-family: "Comic Sans MS";
}

#main-table tr td{

    padding: 3.6pt 0pt 3.6pt 3.6pt;
    vertical-align:middle;
    border-width: 1pt;
    border-color: #999999;
    border-style: dashed;
    height: 20pt;
}

button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 100%;
    appearance: none;
}

button,
input[type="checkbox"] {
    outline: none;
}

.hidden {
    display: none;
}

#main-table tr .destroy {
       background-color: green;
    display: none;
    position: absolute;
    right: 50px;
    width: 40px;
    /*height: 30px; */
    margin: auto 0;
    font-size: 35px;
    color: #cc9a9a;
    margin-top: -40px;
    transition: color 0.2s ease-out;
}

#main-table tr .destroy:hover {
    color: #af5b5e;
}


#main-table tr .destroy:after {
    content: '×';
    background-color: red;
}

/* changed */
#main-table tr:hover .destroy {
    display: block;
    padding: 10px;
    font-size: 15px;
}

<table id="main-table" class="table" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td class="small" colspan="1" rowspan="1"></td>
                <td colspan="3" rowspan="1">
                    <div>
                        <span >JavaScript Basics</span>
                        <button class="destroy"></button>
                    </div>
                </td>
                <td class="small" colspan="1" rowspan="1">24</td>
            </tr>
        </tbody>
    </table>

表＆gt; tr悬停按钮高度需要一些修复

4 个答案: