Question

我需要实现此工具栏。 enter image description here

我有一个演示here。

这是checbox的简单代码：

<label title="Tables"><span>Tables</span><input class="checkbxinput" name="check" value="check1" type="checkbox" id="table" onclick="handleClick();"/></label>

我尝试了一些解决方案，但我总是遇到其中一个问题： - 工具栏的第二部分传递给新行 - 复选框和选择框根本没有变化 - 我不想在这个CSS中有任何背景图片

正如您所看到的，我正在使用div's。我认为这是一个简单的问题，但请相信我，我无法找到正确的解决方案。如果工具栏响应更快，那就更好了。

任何人都可以给我一些提示吗？谢谢，菲利普

Answer 1

enter image description here

包括CSS / JS文件：

<!doctype html>
<html>
<head>

    <title>StackOverFlowMenuBar</title>

    <link rel="stylesheet" type="text/css" href="asfCSSheets/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="asfCSSheets/bootstrap-responsive.css">

    <script type="text/javascript" src="asfJScript/jquery.min.js"></script>
    <script type="text/javascript" src="asfJScript/bootstrap.js"></script>
    <script type="text/javascript" src="asfJScript/bootstrap-collapse.js"></script>
    <script type="text/javascript">
        var borderOfSelectTag   =   "";
        var txtColorSelectTag   =   "";
        function changeSelectsCSS(ggg)
        {
            borderOfSelectTag   =   document.getElementById(ggg).style.border;
            txtColorSelectTag   =   document.getElementById(ggg).style.color;
            document.getElementById(ggg).style.border   =   "2px solid #11a9ac";
            document.getElementById(ggg).style.color    =   "#11a9ac";
        }
        function removeSelectsCSS(ggg)
        {
            document.getElementById(ggg).style.border   =   borderOfSelectTag;
            document.getElementById(ggg).style.color    =   txtColorSelectTag;
        }
    </script>

    <style type="text/css">
        label {
        display: inline;
        }
        .regular-checkbox {
        display: none;
        }
        .regular-checkbox + label {
        background-color: #e9ecee;
        border: 2px solid #e9ecee;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
        padding: 7px;
        margin-left: 3px;
        border-radius: 3px;
        display: inline-block;
        position: relative;
        }
        .regular-checkbox + label:active, .regular-checkbox:checked + label:active {
        box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
        }
        .regular-checkbox:checked + label {
        background-color: #e9ecee;
        border: 2px solid #11a9ac;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
        color: #99a1a7;
        }
        .regular-checkbox:checked + label:after {
        content: '\2714';
        font-size: 14px;
        position: absolute;
        top: -1px;
        left: 2px;
        color: #11a9ac;
        }
        .big-checkbox + label {
        padding: 18px;
        }
        .big-checkbox:checked + label:after {
        font-size: 28px;
        left: 6px;
        }
        .tag {
        font-family: Arial, sans-serif;
        position: relative;
        top: 0px;
        /*font-weight: bold;
        text-transform: uppercase;*/
        display: block;
        float: left;
        }
    </style>

</head> 
<body>
    <div class="navbar navbar-inverse navbar-static-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" id="ulInNav" data-toggle="collapse" data-target=".navbar-inverse-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <div class="nav-collapse navbar-inverse-collapse collapse">
                    <ul class="nav" id="ulInNav">
                        <li><a href="#" style="margin:12px 6px 6px 6px; background-color:#11a9ac;" onclick="return false;" id="clkdMnu">RELATIONS</a></li>
                        <li><a href="#" style="margin:12px 6px 6px 6px; background-color:#11a9ac;">TIME</a></li>
                        <li><a href="#" style="margin:12px 6px 6px 6px; background-color:#11a9ac;">CLUSTERS</a></li>
                        <li><a href="#" style="margin:9px 0px 6px 0px; background-color:#394263;"><div class="tag">Tables</div><input type="checkbox" id="checkbox-1-1" class="regular-checkbox" style="margin-top:-2px;"/><label for="checkbox-1-1"></label></a></li>
                        <li><a href="#" style="margin:9px 0px 6px 0px; background-color:#394263;"><div class="tag">Forms</div><input type="checkbox" id="checkbox-1-2" class="regular-checkbox" style="margin-top:-2px;"/><label for="checkbox-1-2"></label></a></li>
                        <li><a href="#" style="margin:9px 0px 6px 0px; background-color:#394263;"><div class="tag">Menus</div><input type="checkbox" id="checkbox-1-3" class="regular-checkbox" style="margin-top:-2px;"/><label for="checkbox-1-3"></label></a></li>
                        <li><a href="#" style="margin:9px 0px 6px 0px; background-color:#394263;"><div class="tag">All Relations</div><input type="checkbox" id="checkbox-1-4" class="regular-checkbox" style="margin-top:-2px;"/><label for="checkbox-1-4"></label></a></li>
                        <li><a href="#" style="margin:9px 0px 6px 0px; background-color:#394263; max-height: 28px;"><div class="tag">Relation Type</div><select id="selectBox-1-1" style="margin-top:-5px; margin-left:10px; background-color:#e9ecee; border:2px solid #e9ecee;" onfocus="changeSelectsCSS(id);" onblur="removeSelectsCSS(id);"><option>aaa</option><option>bbb</option></select></a></li>
                        <!--<li><a href="#" style="margin:6px 0px 6px 0px; background-color:#394263; height:20px;"><select style="margin-top:-5px;"><option>aaa</option><option>bbb</option></select></a></li>-->
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Answer 2

尝试向这些div添加一些css行：“display：inline-block”或“float：left;”然后你不应该有新线的问题。

Answer 3

尝试将前三个按钮放在一个div标签中，将下一个内容放在第二个div上。

将以下css分配给div。

.first_div{
   float: left;
   width: put width here that is cover only three buttons.
}
.second_div{
   float: left;
}

这不会破坏按钮和复选框。

Answer 4

你可以试试这个：

Working demo

.subOption span{ 
   display:inline-block; 
   vertical-align:top;  
   margin-top: 5px;
}
.subOption input[type=checkbox]{
   display:inline-block; 
   vertical-align:top;  
   margin-top: 5px;
}

更改CSS复选框并选择框

4 个答案: