标题中div标签的水平对齐方式

Question

我试图让我的所有div标签在我的标题中水平对齐.... 但是现在它们都垂直对齐...... 如何使它水平对齐....

在下面提供我的小提琴

http://jsfiddle.net/TdcRJ/4/

<div class="navbar-inner">
        <div class="container-header">
            <!-- <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </a> -->
            <!-- <div class="clear"></div> -->

            <div class="companyLogo" style="width: 1009px;">
                <div style="
    display: inline-block;
">
                    <a class="brand" href="&lt;?= HOME_URL ;?&gt;" style="">
                    Company LOGO
                    </a>
                </div>
                <div style="clear: left;">
                    <p>47657 Lakeview Blvd</p>
                    <p>Fremont CA 94538</p>
                    <p>510-657-8981</p>
                </div>

                <div>
                    <p>welcome xyz! xyz@defie.co</p>
                </div>

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

                        <ul class="homePageLists" style="">
                            <li style="padding-bottom: 5px; list-style: none; color: #333;">
                                <a style="color: #333;" href="http://www.w3schools.com/" target="_blank">
                                  <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_menu.png">
                                   Menu
                                </a>
                            </li>
                            <li style="padding-bottom: 5px; list-style: none; color: #; ">
                                <a style="color: #653921;" 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: #653921;" 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">
                                  BOM List
                                </a>
                            </li>
                            <li style="padding-bottom: 5px; list-style: none; color: #653921; ">
                                <a style="color: #653921;" 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">
                                    Sub BOM List
                                </a>
                            </li>
                            <li style="padding-bottom: 5px; list-style: none; color: #9e1c20; ">
                                <a style="color: #9e1c20;" href="http://www.w3schools.com/" target="_blank">
                                    <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_product.png">
                                    Product
                                </a>
                            </li>
                            <li style="padding-bottom: 5px; list-style: none; color: #ff5100; ">
                                <a style="color: #ff5100;" href="http://www.w3schools.com/" target="_blank">
                                    <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_customer.png">
                                    Customer List
                                </a>
                            </li>
                            <li style="padding-bottom: 5px; list-style: none; color: #184179;">
                                <a style="color: #ff5100;" 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">
                                    Vendor List
                                </a>
                            </li>
                        </ul>

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

                <div>
                    <p>ABC Systems</p>
                    <p>1234 lakeview Blvd</p>
                    <p>CA 94538</p>
                    <p>510-657-8981</p>
                </div>


            </div>




            <div class="login-container">





                <form method="post" action="/Account" class="bs-docs-example form-horizontal" id="createUserForm">
                    <div class="login-box">
                        <div class="login-label">Email</div><div class="login-input"><input type="text" name="email" value=""></div>
                    </div>
                    <div class="login-box">
                        <div class="login-label">Password</div><div class="login-input"><input type="password" name="password" value=""></div>
                    </div>
                    <div class="login-button">
                    <input type="submit" value="Submit">
                    </div>
                    <div class="clear"></div>
                </form>

                        </div>          <div class="clear"></div>

        </div>
    </div>

Answer 1

您可以在要水平对齐的所有DIV中使用css样式float:left;。

Answer 2

你可以在所有Div中放置float：left或float：right