时间戳

首页 > 解决方案 > 为什么内联元素在html中占用更多宽度

jquery - 为什么内联元素在html中占用更多宽度

问题描述

你能告诉我为什么内联元素需要更多宽度吗

这是我的代码 https://jsbin.com/jawoyutuhi/1/edit?html ，输出 在此处输入图像描述

为什么要占用这个空间。

<html>
<style>
    .red {
        color: red;
    }
    .mb-0 {
        margin-bottom: 0;
    }
    .inlineBlock {
        display:inline-block
    }
    .customInput {
        border: none;
        outline: none;
        border-bottom: 1px solid black;
        width: 100%;
    }
    .customInputContainer {
        font-size: 10px;
        padding-top: 4px;
    }
    .customGridCell {
        border: 1px solid black;
        height: 25px;
        width: 25px;
    }
</style>
<head> </head>
<body>
<div style="width: 700px;height: 842px;padding: 15px">



    <div>
        <div class="customInputContainer inlineBlock">
            <div class="inlineBlock red">
                <label>
                    <b>
                        Mobile Number Alloted
                        <sup>*</sup>
                    </b>

                </label>
            </div>
            <div class="inlineBlock" style="    width: 45%;
                    margin-left: 4px; padding: 0px;
                    vertical-align: sub;">
                <table style="border-spacing: 1px;">
                    <tr>
                        <td class="customGridCell"></td>
                        <td class="customGridCell"></td>
                        <td class="customGridCell"></td>
                        <td class="customGridCell"></td>
                        <td class="customGridCell"></td>
                        <td class="customGridCell"></td>
                        <td class="customGridCell"></td>
                        <td class="customGridCell"></td>
                        <td class="customGridCell"></td>
                        <td class="customGridCell"></td>

                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
</body>
</html>

标签： jqueryhtmlcss

解决方案

您在.inlineBlock中有 45% 的宽度，这就是为什么宽度不是您所期望的。

您可以将其删除并将单个.customGridCell的宽度更改为您想要的任何内容：

<html>
<style>
    .red {
        color: red;
    }
    .mb-0 {
        margin-bottom: 0;
    }
    .inlineBlock {
        display:inline-block
    }
    .customInput {
        border: none;
        outline: none;
        border-bottom: 1px solid black;
        width: 100%;
    }
    .customInputContainer {
        font-size: 10px;
        padding-top: 4px;
    }
    .customGridCell {
        border: 1px solid black;
        height: 25px;
        width: 15px;
    }
</style>
<head> </head>
<body>
<div style="width: 700px;height: 842px;padding: 15px">



    <div>
        <div class="customInputContainer inlineBlock">
            <div class="inlineBlock red">
                <label>
                    <b>
                        Mobile Number Alloted
                        <sup>*</sup>
                    </b>

                </label>
            </div>
            <div class="inlineBlock" style=" 
                    margin-left: 4px; padding: 0px;
                    vertical-align: sub;">
                <table style="border-spacing: 1px;">
                    <tr>
                        <td class="customGridCell"></td>
                        <td class="customGridCell"></td>
                        <td class="customGridCell"></td>
                        <td class="customGridCell"></td>
                        <td class="customGridCell"></td>
                        <td class="customGridCell"></td>
                        <td class="customGridCell"></td>
                        <td class="customGridCell"></td>
                        <td class="customGridCell"></td>
                        <td class="customGridCell"></td>

                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
</body>
</html>

我刚刚删除了.inlineBlock中指定的宽度并减小了.customGridcell的宽度，你可以放任何你想要的。

请参阅JSFiddle。

推荐阅读