Question

在JavaScript中，我运行element.style.display = "block"其中element是<asp:control>，<tr>或<td> DOM元素。当我这样做时，元素显示在一个新行上。如何通过使用JavaScript或CSS来避免这种行为？

作为参考，我正在使用的JavaScript函数如下：

function hideEdit()
{
    document.getElementById("ctl00_ContentPlaceHolder1_btnEdit").style.display = "none";
    document.getElementById("ctl00_ContentPlaceHolder1_btnRegisterMe").style.display="block";
}

我的ASP.NET元素创建我的HTML：

<asp:Button
    ID="btnRegisterMe"
    runat="server"
    CssClass="button_bg_primary"
    OnClick="btnRegisterMe_Click"
    Text="Register"
    OnClientClick="return imagevalidation();"
    TabIndex="94"
    meta:resourcekey="btnRegisterMeResource1" />

Answer 1

要完成此操作，您需要display:inline而不是阻止

display：block - 是内容的创建块，并为其创建新行。

display：inline - 不创建新行，但会将您的内容排列在同一行。

Answer 2

CSS 2.1引入了display: inline-block;，这是两个世界中最好的。

首先，它将元素的内部视为block，允许它包含width和height。然而，元素本身仍然是inline，这意味着它不会像你看到的那样换行换行。

W3Schools an in-depth explanation about display: inline-block。

您可以使用与当前将block设置为document.getElementById("ctl00_ContentPlaceHolder1_btnRegisterMe") .style.display = "inline-block";的方式相同的方式设置JavaScript中的属性：

def mailbox_section(title, current_box, opts = {})
  content_tag :li, opts do 
    link_to(conversations_path(box: title.downcase), html_opts = {}) do
      "#{title.capitalize} #{ content_tag :span, :class => 'badge' {'2'} }" 
    end
  end     
end

style.display =＆＃34; block＆＃34;在所有最新的浏览器中

2 个答案: