0

我有以下代码

                        <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 可见

4

2 回答 2

0

利用

visibility:hidden

然后它会变得不可见，但它们仍将保留在文档中的位置，并且您保留格式。display 将使它消失并且不会保留它在文档流中的位置，viability 使它不可见但仍然保留它在流中的位置。

级联样式表第 2 级修订版 1 (CSS 2.1) 规范：

'visibility' 属性指定是否呈现由元素生成的框。不可见的盒子仍然会影响布局（将“显示”属性设置为“无”以完全抑制盒子的生成）。

  1. 这是一个 jsFiddle 示例（滚动文本框） http://jsfiddle.net/joshnh/7JyRH/

  2. 关于这个话题的好文章：http: //joshnh.com/2011/07/30/display-none-vs-visibility-hidden/

于 2013-05-20T08:24:02.627 回答
0

你也可以这样做，使用 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/

于 2013-05-20T08:29:37.473 回答