html - 在浏览器调整大小时，div 会下降

Question

在标题中，我给出了四个不同的值，并使用 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>

Answer 1

这个怎么样。

enter code herehttp://jsfiddle.net/rosario10/m6uBA/31/

Answer 2

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