1

我有这个 div（如果我们愿意，它可以是跨度或其他不可点击的元素）。这是消息警报框。 

<div id="messageModal" class="medium reveal-modal">
    <div class="row">
        <div id="messageAlertBox" class="alert-box"></div>
        <div class="small-6 large-6 columns"><p id="messageText" class="lead"></p></div>
    </div>
    <a class="close-reveal-modal">x</a>
</div>

然后我对它执行以下操作：

function notifyUser(alertType, messageText) {
    if (alertType === 'Success') {
        $('#messageAlertBox').addClass('success');
    } else if (alertType === 'Error') {
        $('#messageAlertBox').addClass('alert');
    }

    $('#messageAlertBox').html(alertType);
    $('#messageText').html(messageText);
    openModal = 'messageModal';
}

其中“alertType”可能是一个未知长度的字符串。

发生的事情是 messageAlertBox 与它包含的元素一样宽。我已经搞砸了很多，如果它不是最大宽度，我已经设法让它太窄了。基本上只是[]。

我需要这个元素与字符串 alertType 一样宽（再加一点）。我认为 span 会自动执行此操作，但我想我错了。

我怎样才能做到这一点？

4

3 回答 3

0

如果我理解正确，您希望#messageAlertBox 与跨度一样宽加上一点填充？您可以通过将其设置为 display: block （或 inline-block 如果您愿意）来做到这一点：

div {
    display: inline;
    padding: 5px;
}

http://jsfiddle.net/vaAJB/2/

于 2013-05-12T00:45:55.477 回答
0

除非另有说明，否则 Div 会自动占据页面的整个宽度。

在你的 CSS 中，对于 div （或类）

尝试添加：（可以使用 div 或您的 id）

div
{
   display:inline-block;
}

默认显示值为块，不允许将元素放置在其旁边。

inline-block 将宽度设置为“它需要使用的”，并防止 div 占据页面的整个宽度。

如果它只是文本，则 display:inline 应该也可以工作，任何一个:)

于 2013-05-12T00:41:13.330 回答
0

弄清楚了。 

<div class="small-1 large-1 columns"><span id="messageAlertBox" class="alert-box" style="display: inline;"></span></div>

small-1 列 div 将内容放置在行中的正确位置。内容跨越到具有内联样式的文本的大小。

该解决方案响应浏览器窗口大小，而不违反文本大小的约束。

于 2013-05-12T01:26:50.230 回答