Question

我已创建了引导程序菜单项，并在此旁边保留了FLIP选项。

这里的问题是FLIP应该只是旁边的框，但是它出现在下方？

HTML：

<div class="magic-container">               
    <div class="input-group">
        <input type="text" class="typeahead form-control" placeholder="Select category ..." />
                <ul class="dropdown-menu">
                    <li id="one"><a href="#">Sports</a></li>
                    <li role="presentation" class="divider"></li>
                    <li id="two"><a href="#">Entertainment</a></li>
                    <li role="presentation" class="divider"></li>
                    <li id="three"><a href="#">Politics</a></li>
                    <li role="presentation" class="divider"></li>
                    <li id="four"><a href="#">Business</a></li>
                    <li role="presentation" class="divider"></li>
                    <li id="four"><a href="#">Travel</a></li>
                    <li role="presentation" class="divider"></li>
                    <li id="four"><a href="#">Celebrity</a></li>
                    <li><a href="#"></a></li>
                </ul>

                <span class="flip">
                    <span class="dropDownFlip">    
                        <a href="#"> FLIP </a> 
                    </span>
                </span>
            </div>
       </div>

Answer 1

尝试在样式表中添加以下样式

.magic-container .input-group input {
    float: left;
    margin-right: 2%;
    width: 70%;
    }

.flip {
    float: left;
    }

Answer 2

您的input的宽度为100％。它是从bootstrap.min.css文件中应用的。通过在css中添加以下内容，可以解决您的问题：

.input-group .form-control {
    width: auto;
}

这是您的jsFiddle已更新。

更新：由于这是对现有类的更改，并且可能会影响页面/网站上其他位置的元素，因此您可以为此特定实例创建新类。像这样的东西会起作用：

.input-group .floatLeft {
    float: left !important;
    width: auto;
}

只需将课程floatLeft添加到您的输入中即可。

使用bootstrap css对齐元素

2 个答案: