将块元素排列在一条水平线上 [英] arrange block elements in a single horizontal line
问题描述
我不知道，或者我在'搜索'这个艺术中不太好，或者这个主题太简单了，以至于没有人会问这个问题，但自从我开始我的网站以来，我一直在寻找这个问题。
我的网页上只有四个块元素。
- 第一个Block元素仅显示在顶部
- 第二个，第三个和第四个块元素，我希望从下一行排列在一条水平线上
- 目前我正在使用该表执行此操作，但是它的坏的样式，不是吗？！
- 请告诉我一种可以将所有这3个块元素放在同一行中的方法
目前，如果我删除table属性，我的块元素将移动到下一行。
这是它看起来是如何删除table属性的：
^^^^^^^^^块元素：顶部^^^^^^ ^^^^^^
^^^^ Block2 ^^^^^
^^^^ Block3 ^^^^^
^ ^^^ Block4 ^^^^^
我想要块元素2,3,4在同一行中是这样的：
^^^^ Block2 ^^^^^ ^^^^ Block3 ^^^^^ ^^^^ Block4 ^^^^^
< 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>
< html>alt =enter image description here>
< 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>
< html>alt =enter image description here>
< 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>
以上是Chrome上的效果。
I dont know, either I am not that good in the art of 'search' or this topic is so so simple that nobody generally asks this but I have been searching this ever since i started my website. I have only four block elements on my webpage.
- The first Block element displays on the top alone
- The second, third and fourth block elements, I want arranged in a single horizontal line from next line
- At present I am using the table to do this, but its bad styling, isn't it?!
- Please tell me a way in which I can bring all those 3 block elements in the same line
At present, if I remove the table property, my block elements move to next line. This is how it looks if i remove the table property:
^^^^^^^^^Block element: top^^^^^^^^^^^^
^^^^Block2^^^^^
^^^^Block3^^^^^
^^^^Block4^^^^^
I want block elements 2,3,4 in same line like this: ^^^^Block2^^^^^ ^^^^Block3^^^^^ ^^^^Block4^^^^^
You can try display:inline-block or 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>
<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>
<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>
These are the effects on Chrome.
这篇关于将块元素排列在一条水平线上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
