Question

我试图像水平线一样显示3个div。

像这样：

enter image description here

这是我的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;
}

但我无法让它发挥作用。希望有人能帮助我。

谢谢。

Answer 1

一些问题：

它是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;
}

编辑： Here is a fix您在评论中提到的问题。我将图片和名称包装在div中，其中包含固定的height。这让他们失望了。

Answer 2

您的代码中存在错误 - 应该是

display: inline-block;

Answer 3

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

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

Answer 4

是显示：内联块是您的最佳选择。除非有特定原因，否则删除绝对定位。

Answer 5

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

Answer 6

<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

Answer 7

<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......

Answer 8

＆＃13;

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

＆＃13;

在一行中显示3个DIV

8 个答案: