Question

我有一个包含三个div的标题，例如

<header class="main">       
       <div class="logo-image">
          <image src="images/small_logo.jpg" alt="Logo">
       </div>
       <div class="selectoption">
            <ul>
                <li><a href="">HOME</a></li>
                <li><a href="">| MY ACCOUNT</a></li>                
                <li><a href="">| MY WISHLIST</a></li>
                <li><a href="">| MY CART</a></li>               
                <li><a href="">| CHECKOUT</a></li>
                <li><a href="">| LOGIN</a></li>
            </ul>
        </div>
        <div class="choose">
            <select id ="Currency">
                <option value="US dollar">US Dollar - USD</option>
                <option value="Singapore Dollar">Sing Dollar - SGD</option>
                <option value="Indian Rupee">Indian Rupees - INR</option>           
            </select>               
            <input type="text" placeholder ="Search entire store" required>             
        </div>
    </header>

我希望图片，列表和货币在一行中显示为html的标题。我尝试使用float：left以及人们提出的其他一些方法，但似乎没有任何工作。

一种方法是将图像和货币也作为ul元素的子元素，但我想这不是正确的方法吗？

任何建议

Answer 1

您可以通过一点引导轻松实现这一目标。为您的利益使用grid system。

在你的3个div旁边放一个div：

<div class="col-md-4"></div>

您可以在我提到的链接中找到更多信息。

提示：您可以使用几个div使您的网站移动设备就绪。

Answer 2

我最终做的是利用bootstrap类“pull-right”，“pull-center”和pull-left“来实现这个目标

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">        
</head>
<body>
    <div class="logo">
        <div class="pull-left">
            <image src="images/small_logo.jpg">
        </div>
        <div class="pull-center">
            <ul class="list-inline">
                <li><a href="">HOME</a></li>
                <li><a href="">| MY ACCOUNT</a></li>                
                <li><a href="">| MY WISHLIST</a></li>
                <li><a href="">| MY CART</a></li>               
                <li><a href="">| CHECKOUT</a></li>
                <li><a href="">| LOGIN</a></li>
            </ul>
        </div>
        <div class="pull-right">
            <select id ="Currency">
                <option value="US dollar">US Dollar - USD</option>
                <option value="Singapore Dollar">Sing Dollar - SGD</option>
                <option value="Indian Rupee">Indian Rupees - INR</option>           
            </select>               
            <input type="text" placeholder ="Search entire store" required>     
        </div>          
     </div>
 </body>

在HTML中水平对齐div与不同的内容

2 个答案: