display: inline-block没有将我的div与前一个div放在同一行
display: inline-block没有将我的div与前一个div放在同一行
提问于 2019-09-04 01:07:55
我的代码看起来像下面这样：
#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中动态插入元素的代码，这会导致表单在页面上跳来跳去。
回答 2
Stack Overflow用户
发布于 2019-09-04 02:19:35
你到底想要什么？请尝试此代码
#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;
}
Stack Overflow用户
发布于 2019-09-04 01:54:26
这个怎么样？
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57776067
复制相关文章
相似问题
腾讯云开发者
