Html 表和分区布局

桌子

10000000000
10000000000

和一个div

<table>
    <tr>
        <td>
            <button>10000000000</button>
        </td>
        <td>
            <button>10000000000</button>
        </td>
    </tr>
</table>

10000000000
10000000000

这两个做同样的事情；显示两个相邻的按钮，我的问题是，如果窗口被调整到较小的区域，如何在div中保持这两个按钮相邻。这张桌子让它们挨在一起，但我不用桌子

---

Tanx要获得帮助

您可以使用CSS属性/值

空白：nowrap

来防止内联内容中的换行。

<div> 
  <span ><button>10000000000</button></span> 
  <span ><button>10000000000</button></span> 
</div>

10000000000
10000000000

在CSS中

<div style="width:400px"> 
  <span ><button>10000000000</button></span> 
  <span ><button>10000000000</button></span> 
</div>

---

试着给他们所有的宽度：

div {
   display: block;
   /** Setting width if needs be */
   width: 100%;
}

div span {
    display: inline;

/* or */
    float: left;
}

10000000000
10000000000

如果您的div的样式至少具有使两个按钮相邻所需的宽度，则无论浏览器的大小如何，它都将保持该宽度：

<div style="width:300px;"> 
  <span ><button style="width:100px;">10000000000</button></span> 
  <span ><button style="width:100px;">10000000000</button></span> 
</div>

现在，这在IE6中不起作用，但这里有另一个同样的解决方案：

<div style="min-width: 200px;"> 
  <span ><button>10000000000</button></span> 
  <span ><button>10000000000</button></span> 
</div>

---

请注意，后一种解决方案将不允许任何换行，但由

或其他块元素手动创建的换行除外。

此类操作的最佳工具：j/k；-）对不起，我无法抗拒

<div style="min-width: 200px;"> 
  <span ><button>10000000000</button></span> 
  <span ><button>10000000000</button></span> 
</div>

<div> 
  <div style="width: 200px;">
     <!-- parent can never be smaller than its biggest child -->
  </div>
  <span ><button>10000000000</button></span> 
  <span ><button>10000000000</button></span> 
</div>

<div style="white-space: nowrap;"> 
  <span ><button>10000000000</button></span> 
  <span ><button>10000000000</button></span> 
</div>