跨輸入標籤旁邊，而輸入標籤需要全寬

我想放置一個範圍滑塊旁邊的輸出標籤。兩個標籤應該在同一行上，而輸入範圍滑塊需要給定空間的全部寬度。

問題：我不得不

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

跨輸入標籤旁邊，而輸入標籤需要全寬

回答

相關問題