如何在显示时将元素置于行内：在样式属性

Question

<table>
<tr>
    <td align="center">
        <input name="button" type="submit" class="btn_big" value=" Add Dependent" >
        <input id="editBtn" style="display: block;" name="button" type="button" class="btn" value=" Edit " onclick="editDep();" >
        <input name="button23" type="button" class="btn" value="Back" onclick="goBack('../login/loadHome.action');"/>
 </td></tr>
      </table>


  <script>
  var searchApprovalStatus = someElement; 
  if(searchApprovalStatus != "0"){
  var elemt = document.getElementById("editBtn");
  elemt.style.display = "none";
  }
  </script>

但我得到的按钮是：

如果我删除了id＆amp; style，即

id="editBtn" style="display: block;"

所有三个按钮都在同一行。

我无法删除此内容。是否有可能仍然按直线按钮？

Answer 1

因为它是内联式的，所以你需要使用!important来否决它。 我使用了ID选择器，因此没有其他标签会受到影响。

Source: css tricks

  

Rohit Agrawal

     

然而，使用！important被认为是一种不好的做法。

     

原因：

     

附加到CSS属性值的！important值是自动的   赢得。它甚至覆盖了标记中的内联样式。唯一的方法   ！重要的价值可以被另一个重要的规则覆盖   后来在CSS中声明具有相同或很大的特异性值   否则。

input#editBtn {
    display: inline-block !important;
}

<table>
<tr>
    <td align="center">
        <input name="button" type="submit" class="btn_big" value=" Add Dependent" >
        <input id="editBtn" style="display: block;" name="button" type="button" class="btn" value=" Edit " onclick="editDep();" >
        <input name="button23" type="button" class="btn" value="Back" onclick="goBack('../login/loadHome.action');"/>
 </td></tr>
      </table>

Answer 2

您需要覆盖内联样式。为此，请使用以下CSS：

input.btn[style],
input.btn_big[style] {
  display: inline-block !important;
}

这里是working JSFiddle

＆＃13;

＆＃13;

var searchApprovalStatus = someElement;
if (searchApprovalStatus != "0") {
  var elemt = document.getElementById("editBtn");
  elemt.style.display = "none";
}

＆＃13;

input.btn[style],
input.btn_big[style] {
  display: inline-block !important;
}

＆＃13;

<table>
  <tr>
    <td align="center">
      <input name="button" type="submit" class="btn_big" value=" Add Dependent">
      <input id="editBtn" style="display: block;" name="button" type="button" class="btn" value=" Edit " onclick="editDep();">
      <input name="button23" type="button" class="btn" value="Back" onclick="goBack('../login/loadHome.action');" />
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

谢谢Choz：

style="display: inline-block;"对我来说很好。

再次感谢。