Question

能否请您告诉我为什么内联元素需要更大的宽度

这是我的代码 https://jsbin.com/jawoyutuhi/1/edit?html,output

为什么要占用这个空间。

<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>

Answer 1

.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。

为什么内联元素在HTML中采用更多宽度

1 个答案: