Question

我不知道，或者我在搜索＆＃39;或者这个主题是如此简单，以至于没有人通常会问这个，但自从我开始使用网站以来，我一直在搜索这个。我的网页上只有四个块元素。

第一个Block元素单独显示在顶部
第二，第三和第四块元素，我想从下一行排列成一条水平线
目前我正在使用桌子来做这件事，但它的造型不好，不是吗？！
请告诉我一种方法，我可以将所有这3个块元素放在同一行中

目前，如果删除table属性，我的块元素将移动到下一行。这是我删除表属性的样子：

^^^^^^^^^块元素：顶部^^^^^^^^^^^^

^^^^块2 ^^^^^

^^^^块3 ^^^^^

^^^^块4 ^^^^^

我希望块元素2,3,4在同一行中，如下所示： ^^^^ Block2 ^^^^^ ^^^^ Block3 ^^^^^ ^^^^ Block4 ^^^^^

Answer 1

您可以尝试显示：inline-block或float:left。

<html>
  <head>
    <style type="text/css">
      div {
      border: 1px black solid;
      }
    </style>
  </head>
  <body>
    <div>aaa</div>
    <div>bbbbbb</div>
    <div>cccc</div>
  </body>
</html>

enter image description here

<html>
  <head>
    <style type="text/css">
      div {
      border: 1px black solid;
      display: inline-block;
      }
    </style>
  </head>
  <body>
    <div>aaa</div>
    <div>bbbbbb</div>
    <div>cccc</div>
  </body>
</html>

enter image description here

<html>
  <head>
    <style type="text/css">
      div {
      border: 1px black solid;
      float: left;
      }
    </style>
  </head>
  <body>
    <div>aaa</div>
    <div>bbbbbb</div>
    <div>cccc</div>
  </body>
</html>

enter image description here

这些是对Chrome的影响。

将块元素排列在一条水平线上

1 个答案: