Css 无法正确放置HTML5滑块输出_Css_Html_Positioning_Rangeslider

Css 无法正确放置HTML5滑块输出

css html

Css 无法正确放置HTML5滑块输出,css,html,positioning,rangeslider,Css,Html,Positioning,Rangeslider,我不完全确定如何正确表达这个问题，对此我深表歉意。我想在这里实现的是，输出显示在滑块旁边，而不是它下面查看错误：alainbruno.nl/form.html 无论如何，我只是从HTML5开始，这是到目前为止的代码： <!DOCTYPE html> <html lang = "en"> <head> <title>Character Creation</title> </head> <script src="htt

我不完全确定如何正确表达这个问题，对此我深表歉意。我想在这里实现的是，输出显示在滑块旁边，而不是它下面

查看错误：alainbruno.nl/form.html

无论如何，我只是从HTML5开始，这是到目前为止的代码：

<!DOCTYPE html>
<html lang = "en">
<head>
<title>Character Creation</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
    $(function(){
        //Range
        var val     = $('#slider').val();
            output  = $('#output');

        output.html(val);

        $('#slider').on('change', function(){
            output.html(this.value);
        });
    });
</script>
<body>
<h1>Form</h1>
<form>
<fieldset>
<legend>Appearance</legend>
<p>
<label>
Select Race:
</label>
<select id="Race">
<option value="human">Human</option>
<option value="faela">Faela</option>
<option value="domovoi">Domovoi</option>
<option value="arcon">Arcon</option>
<option value="tsaaran">Tsaaran</option>
</select>
</p>
<p>
 <label>Select Gender</label>
<select id="Gender">
<option value="male">Male</option>
<option value="female">Female</option> 
<option value="other">Other</option>
</select>
</p>
<p>
<label for="range">Select Age:</label> <input type="range" min="14" max="60" id="slider"     value="10" name="range"> <div id="output"></div>
</p>
</fieldset>
</form>
</body>
</html>

只需将保存该值的

看

或者，您可以使用css将其设置为display:inline，但这将是一个反模式的IMHO，因为默认情况下display:inline是存在的

<p>
    <label for="range">Select Age:</label> 
    <input type="range" min="14" max="60" id="slider" value="10" name="range"> 
    <span id="output"></span>
</p>