Question

我正在努力解决这个问题：

我想在输出标记旁边放置一个范围滑块。两个标记应位于同一行，而输入范围滑块采用给定空间的整个宽度。

问题：我必须

display:block

span元素，因为我想设置一个固定宽度。这和

width:100%;

范围滑块的

使我无法实现我的目标。

我已经设置了JSFiddle。

那么，我怎样才能做到这一点？

输出标记的固定宽度
输出和输入应并排放在一行
输入滑块应采用给定空间的整个宽度

Answer 1

没有float和IE8及以上支持的方式
使用display:table

working demo

  .form-inline {
        display:table;
        border:1px solid green;
        table-layout:fixed;
        width:100%;
        margin:0;
        padding:0;
    }
    .input_button {
        display:table-cell;
        width:104px; /* Fixed span width*/
        margin:0;
        padding:0;
        text-align:center;
        border:1px solid black;
    }
    #range_slider {
        border:1px solid red;
        display:table-cell;
        border:1px solid red;
        margin:0;
        padding:0;

    }

Answer 2

您需要在span上设置左浮动，而不是给范围滑块宽度为100％，给出范围19％和范围滑块78％。你需要在他们之间划分100％。

.input_button{
float:left;
    width:19%;
}
#range_slider{
    width:78%;
    margin-top:33px;
        margin-left:10px;
}

这是fiddle

Answer 3

尝试使用 display：inline-block

，而不是为span元素设置 display：block

在输入标记旁边，而输入标记占据整个宽度

3 个答案: