Question

在我的管理部分网站上，我可以编辑以前发布的博客。它工作正常但它有点难看，我无法找到足够的CSS来解决这个问题。

基本上每个博客帖子都是这样的：

<div> 
    <span class="edit" contenteditable="true">
        this is an editable title"
    </span>
</div> 

<div> 
    <span class="edit" contenteditable="true"> 
        This paragraph contains a blog post which is editable by the user. It looks a little strange. and it looks even worse if there is a line-wrap
    </span>
</div>

和css是

.edit{
    background-color:#FFD685;
    border:1px solid #998050;
    padding:3px;
}

跨度相互重叠，看起来很奇怪。如果我取消padding:3px;它看起来更好，但长篇文章的文字包装仍然看起来很糟糕。最终，我希望它是线的大小，如果有包装，盒子的高度将包含它们之间没有边界。

Answer 1

演示：http://jsfiddle.net/z7cgu97q/3/

只需将以下代码添加到CSS：

即可

display:block;

默认情况下，

<span>为display:inline，因此您添加的边框和填充实际上并未影响其大小。您正在看到重叠，因为边框/填充的宽度大于行高

跨越文本边框重叠本身

1 个答案: