Question

我正在撰写包含标题和描述的通知。并将其显示在表单旁边。

在jQuery中编写元素：

var $title = $('<span></span>').addClass('title').text($('#title').val());
var $description = $('<span></span>').addClass('description').text(plainText);
var $notification = $('<span></span>').append($title).append($description).addClass('notification');

CSS：

.notification{
    border: 1px solid red;
    margin: 10px;
}

理想情况下，我希望边框包围标题和说明。我在这里做错了什么？

Fiddle

Answer 1

默认情况下，

<span>是内联元素。要强制它遵守内容的矩形尺寸，请使用display: inline-block;

.notification{
    border: 1px solid red;
    margin: 10px;
    display: inline-block;
}

演示： http://jsfiddle.net/7b3j2/20/

Answer 2

只需添加display：block;到.notification calss

.notification{
    border: 1px solid red;
    margin: 10px;
    display: block;
}

或将通知包装器更改为div而不是span

var $notification = $('<div></div>').append($title).append($description).addClass('notification');

演示：Jsfiddle

CSS边界破坏

2 个答案: