입력을 인라인으로 표시하려면 어떻게해야합니까?

다음 코드에서 두 입력을 {display: inline} 형식으로 표시하는 방법을 알아낼 수 없으므로 서로 다른 줄이 아닌 서로 옆에 나타납니다. 다른 게시물을보고이 CSS 스타일을 추가하려고 jQuery, <style> 태그, .setAttribute 등을 시도했습니다.입력을 인라인으로 표시하려면 어떻게해야합니까?

또한 CSS에서 필수 display: inline 명령을 사용하여 HTML 클래스를 만들려고했습니다. 내 홈페이지의 버튼을 클릭하면 열 수 있도록이 함수를 만들었습니다. 모든 것이 잘 작동하며 두 입력 (텍스트 및 버튼)이 서로 나란히 배치되기를 바랍니다.

어디서 잘못 될지 알고 싶습니까? 나는 초보자이다.

var counter = 1; 
var limit = 2; 
var newdiv = document.createElement('div'); 

function addInput(divName){ 
    if (counter == limit) { 
      (counter); 
    } 
    else { 
      nFilter.className = 'input'; 
      newdiv.setAttribute("style", "display: inline;"); 
      newdiv.innerHTML = "<br><input type='text' placeholder='Postal Code' name='myInputs[]'> " + " <input type='button' value='Lets Go!' onclick='url(file:///C:/Users/Joy/Documents/ZapList/HoldingPage.php)'>"; 
      document.getElementById(divName).appendChild(newdiv).span; 
      counter++; 
    } 
}

출처

2014-10-09 JEA

입력은 기본적으로 inline-block, 그래서 공간이 있는지 여부가 다음 줄로 줄 바꿈됩니다하지 않을 경우 그들은 인라인 표시됩니다. 어느 포함하는 요소가 사용자의 입력을 수용하거나 시도 할만큼 넓은 확인하십시오,

newdiv.setAttribute("style", "display: inline;white-space:nowrap;");

는 포장에서 입력을 중지하려면이 스타일은 div하지 입력에 적용되어 있습니다, 당신은 실제로 수행 할 수 있습니다 display:inline;을 삭제하십시오.

출처

2014-10-10 00:53:00

감사합니다. 예 - 디스플레이를 제거했습니다 : 인라인 및 작동했습니다. 여기에 필자가 필요한 것을 얻기 위해 추가 된 줄이있다. newdiv.setAttribute ("style", "width : 900px; white-space : nowrap;"); – JEA

내가 바로 당신을 얻을 경우, 당신은 버튼을 클릭 할 때 두 개의 텍스트 상자를 표시하려면 ...

당신은 꽤 간단하게하고 document.write를 명령을 할 수 있습니다.

<body> 
<input type="button" value="Click me" onClick="makeSmth()"></input> 
</body> 

<script> 
function makeSmth() { 

    document.write("<br><input type='text' id='textBox01'></input>"); 
} 
</script>

출처

2014-10-09 21:52:34 herzDev

style = 'float : left;'을 사용하면됩니다. 각 입력 요소에 대한는

<html> 
    <head> 
    <title>this is a test</title> 
    <meta content=""> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    </head> 
    <body> 
     <div id="a"></div> 
     <script type="text/javascript"> 
    var counter = 1; 
    var limit = 2; 
    var newdiv = document.createElement('div'); 

    function addInput(divName){ 
    if (counter != limit) { 
     newdiv.innerHTML = "<br><input type='text' placeholder='Postal Code' name='myInputs[]' style='float:left;'> " + " <input type='button' style='float:left;' value='Lets Go!' onclick='url(file:///C:/Users/Joy/Documents/ZapList/HoldingPage.php)'>"; 
     document.getElementById(divName).appendChild(newdiv); 

     counter++; 
    } 
    } 
    addInput("a"); 
     </script> 



    </body> 
    </html>

출처

2014-10-09 23:48:01 Saeid

입력을 인라인으로 표시하려면 어떻게해야합니까?

답변

관련 문제