儲蓄通過JavaScript編輯工作，並調整發行

Question

JavaScript之後：

<script> 
function showMe(){ 
document.querySelector('#change').style.display = ''; 
document.querySelector('#keep').style.display = 'none' 
document.querySelector('#change1').style.display = ''; 
document.querySelector('#keep1').style.display = 'none' 
document.querySelector('#change2').style.display = ''; 
document.querySelector('#keep2').style.display = 'none' 
document.querySelector('#change3').style.display = ''; 
document.querySelector('#keep3').style.display = 'none' 
document.querySelector('#change4').style.display = ''; 
document.querySelector('#keep4').style.display = 'none' 
} 
</script> 

HTML代碼：

<table class="table table-user-information"> 
<tbody> 
<tr> 
<td>Name:</td> 
<td><span id= "keep">Username</span><input id= "change" value= "Name" style= "display:none;"></td> 
</tr> 
<tr> 
<td>Date of Birth</td> 
<td><span id= "keep1">01/24/1988</span><input id= "change1" value= "11/14/2016" style= "display:none;"></td> 
</tr> 
<tr> 
<tr> 
<td>Gender</td> 
<td><span id= "keep2">Female/Male</span><input id= "change2" value= "Female" style= "display:none;"></td> 
</tr> 
<tr> 
<td>Country</td> 
<td><span id= "keep3">US</span><input id= "change3" value= "US" style= "display:none;"></td> 
</tr> 
<tr> 
<td>Email</td> 
<td><span id= "keep4"><a href="mailto:info@support.com">info@support.com</a></span><input id= "change4" value= "Email" style= "display:none;"></td> 
</tr> 

</tbody> 
</table> 
</div> 
</div> 
</div> 
<div class="panel-footer"> 
<a data-original-title="Broadcast Message" data-toggle="tooltip" type="button" class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-envelope"></i></a> 
<span class="pull-right"> 
<a href="#" data-original-title="Edit this user" data-toggle="tooltip" type="button" class="btn btn-sm btn-warning" onclick = 'showMe()'><i class="glyphicon glyphicon-edit"></i></a> 
<a data-original-title="Save this user" data-toggle="tooltip" type="button" class="btn btn-sm btn-success"><i class="glyphicon glyphicon-saved"></i></a> 
</span> 
</div> 

我怎樣才能讓編輯保存好，一旦我點擊保存按鈕？另外，當我點擊編輯時，表格變得更大一些，我試圖在編輯前後改變字體大小相等，但它不起作用，這似乎是什麼問題？

Answer 1

那是因爲你是填充左<div id="icons">與250像素。如果你想要居中，你可以使用margin: 0 auto;。您也可以移動版只使用@media查詢（見更多信息https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries）