javascript - CSS 边界中断

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/