HTML5 슬라이더 출력을 올바로 배치 할 수 없음

어떻게이 문구를 올바르게 구사 할 수 있는지 잘 모르겠다. 여기서 내가 원하는 것은 "출력"이 슬라이더 바로 옆에 표시되고 그 아래에는 표시되지 않는다는 것입니다. 난 그냥 HTML5로 시작하고, 어쨌든HTML5 슬라이더 출력을 올바로 배치 할 수 없음

alainbruno.nl/form.html, 이것은 지금까지 코드 :

은 잘못을 확인하려면

<!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>

출처

2013-04-05 Alain Bruno

은 그냥 만들어 그 값을 보유하고있는 <div>가 <span>은 그래서 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>

참조 this Plunk: http://plnkr.co/edit/ELffjF?p=preview

또는 해당 <div>display:inline로 설정하는 CSS를 사용할 수 있지만 <span>이 존재하고 그대로 그 display:inline

출처

2013-04-05 17:49:56 couzzi

환상적인 기본적으로보고, 안티 - 귀갑 이럴 것, 대단히 감사합니다! –

HTML5 슬라이더 출력을 올바로 배치 할 수 없음

답변

관련 문제