具有固定宽度和一个扩展元素的浮动布局

Question

我想做这样的事情：

前缀 - 输入（类型：文本，数字，..） - 后缀 - 按钮

ul
{
    list-style: none;
    width: 300px;
    margin: 0;
    padding: 0;
}
li
{
    margin: 0;
    padding: 0;
}
table 
{
    margin: 0 auto;
    padding: 0;
    border-spacing: 0px;
    border-collapse: collapse;
}
input[type=number] 
{ 
    width: 100%; 
}
input[type=button] 
{ 
    width: 100%;
    padding: 0px 20px;
}

.value
{
    padding-right: 10px;
    padding-left: 10px;
}

.ok
{
    padding-left: 10px;
}

<ul>
    <li>
        <table>
            <tr>
                <td class="prefix">
                    prefix
                </td>
                <td class="value">
                    <input type="number" size="1"/>
                </td>
                <td class="sufix">
                    suffix
                </td>
                <td class="ok">
                    <input type="button" value="val1"/>
                </td>
            </tr>
        </table>
    </li>
    <li>
        <table>
            <tr>
                <td class="prefix">
                    pre
                </td>
                <td class="value">
                    <input type="number" size="1"/>
                </td>
                <td class="sufix">
                    suf
                </td>
                <td class="ok">
                    <input type="button" value="longervalue"/>
                </td>
            </tr>
        </table>
    </li>
    <li>
        <table>
            <tr>
                <td class="prefix">
                    pre
                </td>
                <td class="value">
                    <input type="number" size="1"/>
                </td>
                <td class="sufix">
                    suf
                </td>
                <td class="ok">
                    <input type="button" value="v"/>
                </td>
            </tr>
        </table>
    </li>
</ul>

我必须放置4个固定宽度。

我不知道前缀，后缀，也不知道按钮的文本。

我希望所有这3个元素都使用尽可能小的空间，输入标签的宽度填满了这个地方。

这可能吗？

我不想使用表格或JS IF POSSIBLE

Answer 1

使用Flexbox layout.

鉴于此html：

<section>
  <label>pre</label>
  <input type="number" size="1"/>
  <label>suf</label>
  <input type="button" value="longervalue"/>
</section>

您只需要：

section {
  display: flex;
}

input[type=number] {
  flex-grow: 1;
}

<强> jsFiddle

Answer 2

使用belo代码

<style>
ul
{
    list-style: none;
    width: 300px;
    margin: 0;
    padding: 0;
}
li
{
    margin: 0;
    padding: 0;
}
table 
{
    margin: 0 auto;
    padding: 0;
    border-spacing: 0px;
    border-collapse: collapse;
}
input[type=number] 
{ 
    width: 100%; 
}
input[type=button] 
{ 
    width: 100%;
    padding: 0px 20px;
}

.value
{
    padding-right: 10px;
    padding-left: 10px;
}

.ok
{
    padding-left: 10px;
}
</style>
<ul>
    <li>
        <table>
            <tr>
                <td class="prefix">
                    prefix
                </td>
                <td class="value">
                    <input type="number" size="1"/>
                </td>
                <td class="sufix">
                    suffix
                </td>
                <td class="ok">
                    <input type="button" value="val1"/>
                </td>
            </tr>
             <tr>
                <td class="prefix">
                    pre
                </td>
                <td class="value">
                    <input type="number" size="1"/>
                </td>
                <td class="sufix">
                    suf
                </td>
                <td class="ok">
                    <input type="button" value="longervalue"/>
                </td>
            </tr>
            <tr>
                <td class="prefix">
                    pre
                </td>
                <td class="value">
                    <input type="number" size="1"/>
                </td>
                <td class="sufix">
                    suf
                </td>
                <td class="ok">
                    <input type="button" value="v"/>
                </td>
            </tr>
        </table>
    </li>