Question

我正在修改CKEdit组件的外观，以便隐藏工具栏，除非单击。为此，我使用position：relative和top：18px将工具栏collapser移动到它下面的行。

我的目标是让锚元素的父级tr高度为2px，但保持锚点为11px。这可能吗？我不能改变DOM，只改变样式。

这是我的简化代码

<style type="text/css">
    table { width: 80px;}
    td { border: solid 1px #ccc; }
    .header  
    {
        background-color: #99f;
        /* This is being ignored */
        height:2px; 
        }
    .below 
    {
        float: right; 
        position: relative;
        top: 18px;
        /*If I shrink,  the BG image goes Away*/
        height: 11px;
        width: 11px;
        background-image: url('http://ckeditor.com/apps/ckeditor/3.3/skins/kama/images/sprites.png');
        background-position: 4px -1387px;
        border: 1px outset #D3D3D3;
    }
    .hidden { display:none; }

</style>

<table>
<tr><td class="header"><a class="below"><span class="hidden">#</span></a></td></tr>
<tr><td>next row</td></tr>
</table>

根据以下建议重新发布新代码。这会显示页面右上角的箭头

<style type="text/css">
    table { width: 80px; position:relative;}
    td { border: solid 1px #ccc; }
    .header  
    {
        position: relative;
        background-color: #99f;
        /* This is being ignored */
        height:2px; 
        }
    .below 
    {
        float: right; 
        position: absolute;
        top: 6px;
        right: 2px;
        /*If I shrink,  the BG image goes Away*/
        height: 11px;
        width: 11px;
        background-image: url('http://ckeditor.com/apps/ckeditor/3.3/skins/kama/images/sprites.png');
        background-position: 4px -1387px;
        border: 1px outset #D3D3D3;
    }
    .hidden { display:none; }

</style>

<br /><br /><br /><br /><br /><br />
<table>
<tr><td class="header"><a class="below"><span class="hidden">#</span></a></td></tr>
<tr><td>next row</td></tr>
</table>

修改（每条评论）：
如果我在锚点和单元格之间添加一个相对定位的div，我可以实现结果，但同样，我无法修改DOM。

<td class="header">
<div style="position:relative; ">
    <a class="below"><span class="hidden">#</span></a>
</div>
</td>

Answer 1

在position:relative上设置<table>，以便相对于孩子进行绝对定位。然后在position:absolute上添加<a class="below">，并根据自己的喜好调整top和left。（see example）

table { display:block; position:relative; width:80px; }
.header { width:80px; }
.below {
  float: right; 
  position: absolute;
  top: 6px; right:2px; // adjust as needed
}

绝对定位<a>您可以自由更改父<td>高度，就好像它不包含.below

一样

编辑：要在FF中工作，需要将display:block添加到表中并复制width .header中的{{1}}

Answer 2

尝试将.below设置为position:absolute而不是relative，然后添加left:69px（表格宽度 - 锚点宽度）。

修改

  td { border: solid 1px #ccc; }
.header  
{
    background-color: #99f;
    /* This is being ignored */
    height:2px; 
    position:relative;

    }
.below 
{
    float: right; 
    position: absolute;
    top: 18px;
    left:69px;
    /*If I shrink,  the BG image goes Away*/
    height: 11px;
    width: 11px;
    background-image: url('http://ckeditor.com/apps/ckeditor/3.3/skins/kama/images/sprites.png');
    background-position: 4px -1387px;
    border: 1px outset #D3D3D3;
}
.hidden { display:none; }
table { width: 80px; position:relative; }

和

<table>
<tr><td class="header"><a class="below"><span class="hidden">#</span></a></td></tr>
<tr><td>next row</td></tr>
</table>

Answer 3

@CKeditor，您可以将工具栏设置为隐藏启动，如下所示：

CKEDITOR.replace( 'editor1', {toolbarStartupExpanded : false} );

希望有所帮助：）

CSS布局 - 使表格单元格内容显示在下面的行中，并设置父行/单元格的高度

3 个答案: