add for class CSS
.ctb
{
vertical-align: bottom;
padding: 0px 0px 0px 2%;
margin: 0px;
}
.image
{
vertical-align: bottom;
}
Question
I have problems with the placement of the image and the input field. They are placed in a staggered way. I want them to be placed right next to each other, on a straight horizontal line. You can see the problem on the image below.
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>
Jquery:
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%;
}
La solution 2
add for class CSS
.ctb
{
vertical-align: bottom;
padding: 0px 0px 0px 2%;
margin: 0px;
}
.image
{
vertical-align: bottom;
}
Autres conseils
If you add vertical-align: bottom to your .image element that should line everything up correctly.
Please check the updated Fiddle,
<!--Card div-->
<div id="userAddedCard"> <br/>
</div>
.image {
display:inline-block;
height:19px;
width:19px;
/*padding-top:7%;
padding-left:5%;
padding-right:2%;*/
vertical-align:top;
}
Cheers :)
you just need to apply display: block;
to both text and image instead of display:inline-block;
.ctb {
display: block;
width: 20px;
padding-left:2%;
}
.image {
display: block;
height:19px;
width:19px;
padding-top:7%;
padding-left:5%;
}
Updated Fiddle
Here is my Fiddle. Updated following classes
CSS:
.image {
display:block;
float:left;
height:19px;
width:19px;
padding-left:5%;
margin-top: 0.4%;
}
#inboxList {
width: 275px;
height: 700px;
background-color: #f0f0f0;
border: 1px solid black;
margin-left: 0.5%;
margin-top: 0.4%;
border-radius: 10px;
box-shadow: 7px 7px 7px #828282;
overflow: auto;
display:inline-block;
}