부모님의 위치에 따라 아이들의 위치를 잡으려고합니다

-1

알고리즘 빌더를 만들고 상단에 기본 텍스트 상자가 있습니다. "+"를 클릭하면 다음 행에 자체 복사본이 추가됩니다. 이미 행이 있으면 해당 행에 추가됩니다. 문제는 단지 다음 행에 추가하고 싶지 않다는 것입니다. "+"기호를 눌렀을 때 그 위치가 중앙에 위치하기를 원합니다. 누군가 제 코드를 살펴보고 어떻게 해결할 수 있을지 제안 해주십시오. 정말 고맙습니다.부모님의 위치에 따라 아이들의 위치를 잡으려고합니다

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Pathway Builder</title> 
    <link rel="stylesheet" href="style.css" type="text/css" /> 
</head> 
<body> 
    <div id="pathway_builder"> 
     <div class="row" id="row1"> 
      <div class="whole"> 
       <div class="centered_box"> 
        <textarea class="text_field_not_selected"></textarea> 
       </div> 
       <input type="button" value="+" class="add_child not_visable" /> 
      </div> 
     </div> 
    </div> 

    <script src="jQuery.js" type="text/javascript"></script> 
    <script src="selectors.js" type="text/javascript"></script> 
</body> 
</html>

에서 자바 스크립트/jQuery를

$('textarea').live('focusin blur', function() { 
    $(this).toggleClass('text_field_not_selected'); 
}); 

$('.whole').live('mouseenter mouseleave', function() { 
    $(this).find('.add_child').toggleClass('not_visable'); 
}); 


$(document).ready(function() { 
    $('.add_child').live({ 
     click: function() { 
      var new_row = '<div class="row"></div>' 
      var new_child = '<div class="whole"><div class="centered_box"><textarea class="text_field_not_selected"></textarea></div><input type="button" value="+" class="add_child not_visable" /></div>' 
      if ($(this).parents('.row').next().length == 0) { 
       $(this).parents('.row').after(new_row); 
       $(this).parents('.row').next().html(new_child).css('position-x', ''); 
      } else { 
       $(this).parents('.row').next().append(new_child); 
      } 
     } 
    }); 
});

CSS

body { 
    margin: 0px; 
    padding: 0px; 
    text-align: center; 
} 
textarea { 
    width: 4em; 
    height: 1em; 
    overflow: hidden; 
} 

textarea:focus { 
    outline: none; 
    text-align: center; 
    resize: both; 
    padding-top: 5px; 
    padding-bottom: 5px; 
} 
.text_field_not_selected { 
    text-align: center; 
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    box-shadow: 0px 3px 5px #444; 
    -moz-box-shadow: 0px 3px 5px #444; 
    -webkit-box-shadow: 0px 3px 5px #444; 
    resize: none; 
} 
.pathway_builder { 
    text-align: center; 
} 
.whole { 
    text-align: center; 
    display: inline-block; 
    background-position-x: 100px; 
} 
.centered_box { 
    padding: 10px; 
    padding-bottom: 0px; 
} 

.add_child { 
} 

.not_visable { 
    visibility: collapse; 
} 
.row { 

}

출처

2012-03-26 mharris7190

는 YYY시에서 중심되는 나는 그것을 더한다. " 현재로서는 앱 관련 질문에 대한 답변을 얻기 위해 앱을 완전히 이해할 것을 요구합니다. – jfriend00

당신은 수직 배열을 의미합니까? – w3uiguru

친애하는 내 대답을보고 내가 어디에 내가 당신의 필요에 따라 코드를 변경할 수있는 일부에 뒤쳐져 있는지 알려 주시기 바랍니다. – w3uiguru