我在放置图像和输入字段时遇到问题。它们以交错的方式放置。我希望它们彼此相邻放置,在一条水平直线上。您可以在下图中看到问题。
HTML:
<div id="wrapper">
<!--Inbox list and button to add a card-->
<div id="inboxList" class="cellContainer">
<p style="display: inline">Inbox</p>
<!--Button to add a Card-->
<input type="button" id="AddCardBtn" value="+ Add a Card..."/>
<hr class="fancy-line"/> <br/>
<!--Card div-->
<div id="userAddedCard"> <br/>
<div>
</div>
</div>
</div>
</div>
查询:
var $div = $('<div />').addClass('sortable-div');
$('<img />', { "src": "/Pages/Images/calendar.png" }).addClass('image').appendTo($div);
$('<input/>', { "type": "text", "class": "ctb" }).addClass('ctb').appendTo($div);
CSS:
.ctb {
display:inline-block;
width: 20px;
padding-left:2%;
}
.image {
display:inline-block;
height:19px;
width:19px;
padding-top:7%;
padding-left:5%;
}