css - 在一行中显示 3 个 DIV

Question

我正在尝试像水平线一样显示 3 个 div。

像这样：

在此处输入图像描述

这是我的 HTML：

         <div class="notactive"></div>
         <div class="notactive"></div>
         <div class="notactive"></div>

到目前为止，这是我的 CSS：

.notactive {
    height: 10px;
    width: 90px;
    background: #fff;
    position: absolute; 
    //left: 200px;
    bottom: 30px;
    cursor: pointer;
    float: left;
    display: block-inline;
}

更新：

.notactive {
    height: 10px;
    width: 90px;
    background: #fff;
    position: absolute; 
    //left: 200px;
    bottom: 30px;
    cursor: pointer;
    float: left;
    display: inline-block;
}

但我无法让它工作。希望有人能帮助我。

谢谢你。

score 3 · Accepted Answer

几个问题：

它inline-block不是block-inline
position:absolute, left,bottom是不必要的
你使用白色作为它的背景，所以你可能看不到它

jsFiddle

.notactive {
    height: 10px;
    width: 90px;
    background: #000;
    cursor: pointer;
    display: inline-block;
}

还有另一种方法使用float:left;，但inline-block足以满足您的需求。

jsFiddle

HTML

<div class="notactive"></div>
<div class="notactive"></div>
<div class="notactive"></div>
<div class="clear></div>

CSS

.notactive {
    height: 10px;
    width: 90px;
    background: #000;
    cursor: pointer;
    float:left;
    margin:2px;
}

编辑： 这是您在评论中提出的小提琴问题的解决方法。我将图像和名称div用一个固定的height. 这把他们推倒了。

score 0 · Accepted Answer

0

您的代码中有错误 - 应该是

display: inline-block;

于 2013-03-10T13:39:23.683 回答

score 0 · Accepted Answer

我不会为此使用绝对位置，试试这个：

.notactive {
    height: 10px;
    width: 90px;
    background: #fff;
    cursor: pointer;
    float: left;
}

score 0 · Accepted Answer

Yes display: inline-block 是你最好的选择。除非有特定原因，否则请删除绝对定位。

score 0 · Accepted Answer

.notactive:nth-child(1){left:0px;}
.notactive:nth-child(2){left:100px;}
.notactive:nth-child(3){left:200px;}

score 0 · Accepted Answer

<html>
<head>
<style>
.left
{
width:33%;
background-color:cyan;
float:left;
height:200px;
}
.centre
{
background-color:red;
width:33%;
float:left;
height:200px;
}
.right
{
width:33%;
background-color:cyan;
float:left;
height:200px;
}

</style>
<body>
<div class="left"></div>
<div class="centre"></div>
<div class="right"></div>
</body>
</html>
try this coding that I have Created for you

score 0 · Accepted Answer

<html>
<head>
<style>
.notactive1
{
 height: 10px;
 width: 90px;
 background: Red;
 position: absolute; 
 top:10px;
 left:100px;
}
.notactive2
{
 height: 10px;
 width: 90px;
 background: Red;
 position: absolute; 
 top:10px;
 left:200px;
 cursor: pointer;
}
.notactive3
{
 height: 10px;
 width: 90px;
 background: Red;
 position: absolute; 
 top:10px;
 left:300px;
 cursor: pointer;
}
</style>
<body>
<div class="notactive1"></div>
<div class="notactive2"></div>
<div class="notactive3"></div>
</body>
</html>
Another Answer Hope You Statisfied by this ans......

score 0 · Accepted Answer

<div>
    <div style="display: inline-block;width:100px;height:100px;background-color:red;">DIV 1</div>
    <div style="display: inline-block;width:100px;height:100px;background-color:green;">DIV 2</div>
    <div style="display: inline-block;width:100px;height:100px;background-color:blue;">DIV 3</div>
</div>

css - 在一行中显示 3 个 DIV

8 回答 8

Related

Reference