Question

我有以下代码

                        <div class="form-horizontal" >
             <div class="form-actions" id="sub"  >
                <button type="button" class="btn btn-primary" id="Schedulem" value="Schedule," name="Schedulem" > Schedule Maintenance </button>
                <button type="button" class="btn" onclick="cancel()" > Cancel </button>
             </div>
         </div>
         <div class="form-horizontal" >
            <div class="form-actions" id="sub1" style="display :none" >
                <button type="button" class="btn btn-primary" id="Schedule1" value="Schedule1" name="Schedule1" onclick="Schedule1()"> Schedule Maintenance </button>
                <button type="button" class="btn" onclick="cancel()" > Cancel </button>
            </div>
         </div>

问题是因为我在第二个Div类上使用style =“display：none”，schedule1按钮和Cancel按钮显示在不同的行中。如果我们从Div标签中删除样式，它将是内联的。知道如何解决这个问题吗？

我正在使用java脚本，并根据某些条件，我将seconf DIV视为可见

Answer 1

使用

visibility:hidden

它会使隐藏，但他们仍然会保留在文档中的位置，并保持格式。显示将使其消失并且不会将其保留在文档流中，可行性使其不可见但仍保持其在流程中的位置。

层叠样式表2级修订版1（CSS 2.1）规范：

'visibility'属性指定是否生成的框元素被渲染。隐形盒子仍会影响布局（设置 'display'属性为'none'以完全禁止生成框。）

这是一个jsFiddle示例（滚动文本框） http://jsfiddle.net/joshnh/7JyRH/
关于这个主题的好文章： http://joshnh.com/2011/07/30/display-none-vs-visibility-hidden/

Answer 2

您也可以使用style =“display：inline-block”：

执行此操作

     <div class="form-horizontal" style="display:inline-block" >
         <div class="form-actions" id="sub" style="display:inline-block"  >
            <button type="button" class="btn btn-primary" id="Schedulem" value="Schedule," name="Schedulem" > Schedule Maintenance </button>
            <button type="button" class="btn" onclick="cancel()" > Cancel </button>
         </div>
     </div>
     <div class="form-horizontal" style="display:inline-block" >
        <div class="form-actions" id="sub1" style="display:inline-block" >
            <button type="button" class="btn btn-primary" id="Schedule1" value="Schedule1" name="Schedule1" onclick="Schedule1()"> Schedule Maintenance </button>
            <button type="button" class="btn" onclick="cancel()" > Cancel </button>
        </div>
     </div>

http://jsfiddle.net/6bFFf/1/

在HTML中显示内联的多个按钮

2 个答案: