1

水平線のように 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;
}

しかし、私はそれを機能させることができません。誰かが私を助けてくれることを願っています。

ありがとうございました。

4

8 に答える 8

3

いくつかの問題:

  • そうでinline-blockはないblock-inline
  • position:absolute、left、bottom不要
  • その背景に白を使っていたので見えなかったかもしれません

jsフィドル

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

使用する別の方法がありfloat:left;ますinline-blockが、ニーズには十分です。

jsフィドル

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。それが彼らを押し倒した。

于 2013-03-10T13:41:19.400 に答える
0

これには絶対位置を使用しません。これを試してください：

.notactive {
    height: 10px;
    width: 90px;
    background: #fff;
    cursor: pointer;
    float: left;
}
于 2013-03-10T13:40:51.017 に答える
0

はい表示: inline-block が最良のオプションです。特別な理由がない限り、絶対位置を削除します。

于 2013-03-10T13:42:55.347 に答える
0

コードにエラーがあります - エラーになるはずです

display: inline-block;
于 2013-03-10T13:39:23.683 に答える
0 
.notactive:nth-child(1){left:0px;}
.notactive:nth-child(2){left:100px;}
.notactive:nth-child(3){left:200px;}
于 2013-03-10T13:48:20.287 に答える
0 
<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......
于 2013-03-10T14:21:29.400 に答える
0 
<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
于 2013-03-10T14:11:00.553 に答える
0 

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

于 2017-09-28T08:24:39.937 に答える