一旦触发，如何让我的文本框正确对齐？ - jQuery / CSS

Question

您可以在此处查看实施：http://jsfiddle.net/CtLpz/3/

基本上我想要发生的是，当你点击中间的图像（例如，从box1中添加'客户端'）时，你会看到虚线面板中间的文本框（类似于图像的方式）在它被点击之前。）

所有其他方框也应如此。

感谢。

Answer 1

您的样式表使用margin-top来调整图像的位置。如果您改为将这些图像和文本放在块元素中，例如div，那么您可以在jQuery代码中替换此元素的内容，并且新内容的样式将类似。这是一个工作版本：http://jsfiddle.net/treyh/AjycL/

---

HTML之前

<img src="images/add-client-head-icon.png" /><br />
Add Client

HTML后

<div class='middle'>
    <img src="images/add-client-head-icon.png" /><br />
    Add Client
</div>

---

之前的JavaScript

$(this).children().html("Enter Client Name <input type='text' /><br /><input type='submit' value='Submit'/>");

JavaScript之后

$(this).find('.middle').html("Enter Client Name <input type='text' /><br /><input type='submit' value='Submit'/>");

---

CSS之前

#add-client .dashed-panel img {
    margin-top: 20%;
}

CSS

#add-client .dashed-panel .middle {
    margin-top: 20%;    
}