[英]How to align button by vertically in div using JQuery/CSS?
有以下代碼:
<table>
<tr>
<td class="first_column">Sign in</td>
<td class="second_column">->(1)</td>
<td class="third_column"><div class="translated">Some text</div></td>
</tr>
</table>
$(".translated").mouseenter(function(){
if ($(this).hasClass("editable")){
return;
}
var h=$(this).height();
var w=$(this).width();
$(this).empty();
var field = $("<input/>", {
type: "text",
value:$(this).text()
}).appendTo(this);
var button = $("<button></button>").appendTo(this);
field.height(h - field.outerHeight()+field.height());
button.height(h-button.outerHeight()+button.height());
$(this).height(h);
$(this).width(w);
$(this).addClass("editable");
});
.translated
{
color:green;
font-weight:bold;
vertical-align:middle;
width:100%;
}
當鼠標將div對准div時,此代碼將輸入和按鈕項添加到div容器中。 但是存在以下問題-按鈕的高度合適,但是對齊不正確。 我需要一個新的按鈕項垂直位於行的中心。 請告訴我,我該怎么辦?
您必須在js代碼中設置按鈕寬度:
button.css('width', field.width());
試試這個小提琴: http : //jsfiddle.net/velthune/NCrUu/5/
我清理了代碼,添加了表格行,並設置了輸入和按鈕的寬度。 它們的不同之處在於瀏覽器為這些元素提供了空白和邊距
http://jsfiddle.net/andreaslyngstad/BFwU7/
的HTML
<table>
<tr>
<td class="first_column">Sign in</td>
<td class="second_column">->(1)</td>
<td class="third_column">
<div class="translated">Some text</div>
</td>
</tr>
<tr>
<td class="first_column"></td>
<td class="second_column"></td>
<td class="third_column" id="button_container"></td>
</tr>
</table>
的CSS
table{
width:100%
}
button{
width:100px
}
input{
width:96px
}
.translated {
color:green;
font-weight:bold;
vertical-align:middle;
width:100%;
}
JS
var field = $("<input/>", {
type: "text",
value: $(this).text()
})
var button = $("<button>sign in</button>")
$(".translated").mouseenter(function() {
$(this).empty();
field.appendTo(this);
button.appendTo($("#button_container"));
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.