Question

我有这个div（如果我们愿意，它可以是span，或其他不可点击的元素）。这是messageAlertBox。

<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一样宽（再加上一点）。我认为跨度会自动完成，但我想我错了。

我该怎么做？

Answer 1

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

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

尝试添加:(可以使用div或您的ID）

div
{
   display:inline-block;
}

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

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

如果它只是文本，显示：内联也应该有效，可以是：）

Answer 2

如果我理解正确的话，那么你的#messageAlertBox和span一样宽，加上一点填充？您只需将其设置为display：block（如果您愿意，可以使用inline-block）：

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

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

Answer 3

想出来。

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

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

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

动态设置HTML元素的大小（使用Zurb Foundation 4）

3 个答案: