-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>
のJavaScript/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 {
}
私は、このような私は、このHTMLを持っている場合は、どのように私はXXXのdiv要素がときyyyは下中央に配置するのですか」などのより一般的な質問にこれを回すことをお勧めしたいです私はそれを追加する "。今のところ、あなたは非常にアプリ固有の質問に答えるためにあなたのアプリを完全に理解するように求めています。 – jfriend00
あなたは垂直配置を意味しますか？ – w3uiguru
親愛なる私の答えを見て、私があなたの必要に応じてコードを変更することができるので、どこか遅れているかどうかを教えてください。 – w3uiguru