跨输入标签旁边，而输入标签需要全宽

我想放置一个范围滑块旁边的输出标签。两个标签应该在同一行上，而输入范围滑块需要给定空间的全部宽度。

问题：我不得不

display:block

跨度元件，因为我想设置一个固定的宽度。这和

width:100%;

范围滑块使得它不可能（对我来说）实现我的目标。我设置了JSFiddle。

那么，我该如何做到这一点？

固定宽度的输出标签
输出和输入应该在一行
输入滑块应服用给定的空间的整个宽度坐在并排侧

来源

2014-02-11 Bastian Gruber

太好了，谢谢！有没有办法为输出标签设置宽度而不显示：block？因为我想避免浮动。 –

没有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; 

    }

来源

2014-02-11 09:50:16 NoobEditor

绝对是我搜索的，非常感谢！ –

很高兴帮助....欢迎家伙！ :) – NoobEditor

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

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

这里是一个fiddle

来源

2014-02-11 09:47:06

，而不是设置显示：块为为span元件，请试用可以使用显示：内嵌块

来源

2014-02-11 10:02:14

跨输入标签旁边，而输入标签需要全宽

回答

相关问题