显示:inline-block 没有将我的 div 与前一个 div 放在同一行 [英] display: inline-block is not placing my div on the same line as the previous div

问题描述

我有如下代码:

#DigiCertBlahBlah {显示:内联块；宽度:200px；}#formLogin {显示:内联块；}

<img src="images/logo.png"/><form name="formLogin" id="formLogin" method="post" action="Login.aspx">...</表单><!-- 开始 DigiCert 站点密封 HTML 和 JavaScript --><div id="DigiCertBlahBlah" data-language="en_US"><a href="http://www.digicert.com/unified-communications-ssl-tls.htm">UCC SSL</a>
<script type="text/javascript">...<!-- 结束 DigiCert 站点封印 HTML 和 JavaScript -->

而且我试图让 DigiCert 标签出现在

的右侧，而不是出现在它自己的行上.

然而，当我将它们设置为 display: inline-block; 时，它什么也不做；它们仍然出现在单独的行中.

如何使链接出现在表单的右侧?我不能做 float: right; 因为脚本标签包含在 DOM 中动态插入元素的代码，这会导致表单在页面上跳转.

解决方案

你到底想要什么?请试试这个代码

#DigiCertBlahBlah {显示:内联块；宽度:200px；垂直对齐:超级；}#formLogin {显示:内联块；}

<img src="https://i347.photobucket.com/albums/p450/wassimahmad/logo_zpsxkwqnisr.png"/><form name="formLogin" id="formLogin" method="post" action="Login.aspx"></表单><!-- 开始 DigiCert 站点密封 HTML 和 JavaScript --><div id="DigiCertBlahBlah" data-language="en_US"><a href="http://www.digicert.com/unified-communications-ssl-tls.htm">UCC SSL</a>
<script type="text/javascript"><!-- 结束 DigiCert 站点封印 HTML 和 JavaScript -->

**你可以在css上替换

#DigiCertBlahBlah {显示:内联块；宽度:200px；垂直对齐:底部；}

**

**或这个**

#DigiCertBlahBlah {显示:内联块；宽度:200px；垂直对齐:中间；}

I have code which looks like the following:

#DigiCertBlahBlah {
  display: inline-block;
  width: 200px;
}

#formLogin {
  display: inline-block;
}

<div class="content">
  <img src="images/logo.png" />
  <form name="formLogin" id="formLogin" method="post" action="Login.aspx">
    ...
  </form>
  <!-- Begin DigiCert site seal HTML and JavaScript -->
  <div id="DigiCertBlahBlah" data-language="en_US">
    <a href="http://www.digicert.com/unified-communications-ssl-tls.htm">UCC SSL</a>
  </div>
  <script type="text/javascript">
    ...
  </script>
  <!-- End DigiCert site seal HTML and JavaScript -->
</div>

And I'm trying to get the DigiCert <a> tag to appear to the right of the <form> rather than on its own line.

However when I set them to display: inline-block; that does nothing; they still appear on separate lines.

How do I make the link appear to the right of the form? I can't do float: right; because the script tag contains code that inserts elements dynamically in the DOM, and that causes the form to jump around on the page.

解决方案

what do you want exactly? please try this code

#DigiCertBlahBlah {
    display: inline-block;
    width: 200px;
    vertical-align: super;
}

#formLogin {
    display: inline-block;
}

<div class="content">
<img src="https://i347.photobucket.com/albums/p450/wassimahmad/logo_zpsxkwqnisr.png" />
    <form name="formLogin" id="formLogin" method="post" action="Login.aspx">
        
    </form>
    <!-- Begin DigiCert site seal HTML and JavaScript -->
    <div id="DigiCertBlahBlah" data-language="en_US">
        <a href="http://www.digicert.com/unified-communications-ssl-tls.htm">UCC SSL</a>
    </div>
    <script type="text/javascript">
        
    </script>
    <!-- End DigiCert site seal HTML and JavaScript -->
</div>

**You can replace on css

#DigiCertBlahBlah {
    display: inline-block;
    width: 200px;
    vertical-align: bottom;
}

**

**or this **

#DigiCertBlahBlah {
    display: inline-block;
    width: 200px;
    vertical-align: middle; 
}

这篇关于显示:inline-block 没有将我的 div 与前一个 div 放在同一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！