gpt4 book ai didi

html - 在浏览器重新调整大小时,div 下降

转载 作者:行者123 更新时间:2023-11-28 13:18:04 28 4
gpt4 key购买 nike

在标题中,我给出了四个不同的部分,并使用 float 属性使所有内容都显示在一条水平线上。

当我调整浏览器窗口大小时,最后一个 div 位于黑色边框线下方。

如何解决。

http://jsfiddle.net/m6uBA/

<div class="mainDiv" style="border-bottom: 1px solid grey; height: 80px;">
<div class="subDiv" style="font-size: 24px; color: grey; padding-left: 35px;">
Company LOGO
</div>
<div class="subDiv" style="padding-left: 50px;">
<p><span style="font-weight: bold; font-family: arial; color: #333;">welcome xyz!</span> xyz@defie.co</p>
</div>
<div class="subDivMenu" style="width: 911px; margin-top: 0px; padding-left: 17px; ">


<div class="inline" style="padding-top: 12px; ">

<ul class="homePageLists" style="">
<li style="padding-bottom: 5px; list-style: none; color: #333;">
<a style="color: #cc0000; font-family: arial; font-size: 14px; font-weight: bold;" href="http://www.w3schools.com/" target="_blank">
Menu
</a>
</li>
<li style="padding-bottom: 5px; list-style: none; color: #; ">
<a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_inventory.png">
Inventory
</a>
</li>
<li style="padding-bottom: 5px; list-style: none; color: #653921; ">
<a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_vender.png">
Vendors
</a>
</li>
<li style="padding-bottom: 5px; list-style: none; color: #653921; ">
<a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_vender.png">
Quote
</a>
</li>
<li style="padding-bottom: 5px; list-style: none; color: #9e1c20; ">
<a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_vender.png">
Purchase Orders
</a>
</li>
<li style="padding-bottom: 5px; list-style: none; color: #ff5100; ">
<a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_vender.png">
Invoices
</a>
</li>
<li style="padding-bottom: 5px; list-style: none; color: #184179;">
<a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_vender.png">
RMA
</a>
</li>
<li style="padding-bottom: 5px; list-style: none; color: #184179;">
<a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_vender.png">
Account Receivable
</a>
</li>
</ul>

</div><!--/.nav-collapse -->

</div>
<div class="subDiv" style="float: right;">

<p style="font-weight: bold;">ABC Systems</p>
<p>1234 lakeview Blvd, CA 94538</p>
<p>510-657-8981</p>

</div>
</div>

最佳答案

尝试向 .subDiv 添加一个新类,例如 .welcome 并将其向右浮动,而不是在标题中的两个元素上都向左浮动。

关于html - 在浏览器重新调整大小时,div 下降,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14863921/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com