Question

如何将cell phone个单词保留在同一行？

＆＃13;

.label {
    width: 300px;
    padding: 5px 15px;
}

.input {
    border: 1px solid red;
    width: 100%;
}

.input > input {
  width: calc(100% - 4px);
}

＆＃13;

<form class="frm-find-people">
    <table>
        <tbody>
            <tr>
                <td class="label">Cell Phone</td>
                <td class="input"><input type="text" name="name"></td>
            </tr>
        </tbody>
    </table>
</form>

＆＃13;

如您所见，我为该列设置了width: 300px。但似乎它并不适用。为什么呢？

Answer 1

将white-space: nowrap;添加到.label：

＆＃13;

.label {
    padding: 5px 15px;
    white-space: nowrap;
}

.input {
    border: 1px solid red;
    width: 100%;
}

.input > input {
  width: calc(100% - 4px);
}

＆＃13;

<form class="frm-find-people">
    <table>
        <tbody>
            <tr>
                <td class="label">Cell Phone</td>
                <td class="input"><input type="text" name="name"></td>
            </tr>
        </tbody>
    </table>
</form>

＆＃13;

Answer 2

未应用300px宽度，因为您在下一列上有一个width:100%，告诉它占用尽可能多的空间。

要解决此问题，您必须删除下一个width:100%上的td。将其传输到文本字段。最后，将整个表设置为width:100%，以便覆盖整个父级。以下是更正后的CSS。

table {
    width: 100%; /* This should be 100% */
}
    .label {
    width: 300px;
    padding: 5px 15px;
}

.input {
    border: 1px solid red;
    /* remove width 100% from here */
}

.input > input {
  width: 100%; /* this should be 100% */
}

Answer 3

您已将.input设置为width: 100%，这会将.label缩小到可能的最小尺寸（内部字词的长度）

您可以使用css calc使.input 100vw - 300px宽

.input {
    width: calc(100vw - 300px);
}

和

.input > input {
  width: calc(100vw - 300px);
}

＆＃13;

.label {
    padding: 5px 15px;
    border: 1px solid red;
    width: 300px;
}

.input {
    border: 1px solid red;
    width: calc(100vw - 300px);
}

.input > input {
  width: calc(100vw - 300px);
}
tr {
    border: 1px solid blue;
}

＆＃13;

<form class="frm-find-people">
    <table>
        <tbody>
            <tr>
                <td class="label">Cell Phone</td>
                <td class="input"><input type="text" name="name"></td>
            </tr>
        </tbody>
    </table>
</form>

＆＃13;

Answer 4

使用以下css：

表格{宽度：100％; } .label {width：30％;填充：5px 15px; } .input {border：1px solid red;宽度：70％; } .input＆gt;输入{width：calc（100％ - 4px）; }

Answer 5

您的代码存在问题，您应该：

table.mytable {
    width: 100%;
}

因为<td>是<table class="mytable">的子元素。因此，父元素必须具有设置大小才能修改子元素，例如<td>。添加的mytable类只会影响该表，因为您拥有其他类。

如何将宽度设置为td？

5 个答案: