显示:内联块没有将我的 div 与上一个 div 放在同一行上

Question

我有如下所示的代码：

#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>

我试图让DigiCert<a>标签出现在<form>的右侧，而不是它自己的行上。

但是，当我将它们设置为display: inline-block;时，这什么也没做;它们仍然出现在单独的行上。

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

Answer 1

你到底想要什么？ 请尝试此代码

#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>

**您可以在 css 上替换

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

**

**或这个**

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

Answer 2

这个怎么样？

<style>
.content {
width: 100%
max-width: 800px; // you can remove this if you want to use full width
margin: 0px auto;
}
.div-row {
width: 100%;
}
#DigiCertBlahBlah {
display: inline-block;
width: 200px;
margin: 0px;
float: left;
}
#formLogin {
display: inline-block;
width: calc(100% - 200px);
margin: 0px;
float: left;
}
</style>
<div class="content">
<div class = "div-row">
<img src="images/logo.png" />
</div>
<div class = "div-row">
<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>
</div>
<script type="text/javascript">
...
</script>
<!-- End DigiCert site seal HTML and JavaScript -->
</div>