CSS选择器（我认为） - 按钮不会进入Div元素？

我对HTML/CSS很陌生，我只是不知道为什么我的按钮不会进入我的div（这被称为框）。我已经尝试使用.box .btn和.box按钮（以及大约一百万个其他事物来切换ID和移动棋子），而且没有任何工作。CSS选择器（我认为） - 按钮不会进入Div元素？

请帮忙！

这里是我的HTML：

<body> 
    <div class="wrap"> 

    <div id="Nav"> 

    <p> Library </p> 

    <ul> 
     <li><img src="img/glyph.jpg" alt="glyph"></li> 
     <li><img src="img/glyph.jpg" alt="glyph"></li> 
     <li><img src="img/glyph.jpg" alt="glyph"></li> 
    </ul> 

    </div> 

    <div class="box" id="Box1"> 
    <div class="header1"><span class="time">3 Hours</span></div> 
    <div class="btn"><button type=button>Intermediate</button></div> 
    </div> 


    <div class="box" id="Box2"> 
    <div class="header2"><span class="time">2 Hours</span></div> 
    <div class="btn"><button type=button>Intermediate</button></div> 
    </div> 

    <div class="box" id="Box3"> 
    <div class="header3"><span class="time">97.4 Hours</span></div> 
    <div class="btn"><button type=button>Intermediate</button></div> 
    </div> 

    <div class="box" id="Box4"> 
    <div class="header4"><span class="time">Like, Forever Hours</span> 

    </div> 
    <div class="btn"><button type=button>Intermediate</button></div> 
    </div> 

    </div> 

    </body>

和我的CSS：

body, 
html { 
    margin: 0; 
    padding: 0; 
    color: #000; 
    background: #FFFFFF; 
} 


.wrap { 
    height: 800px; 
    width: 1110px; 
    margin: 100px; 
    background-color: #EDEFF0; 
} 

#Nav { 
    height: 70px; 
    width: 1070px; 
    margin: 15px; 
    padding: 0; 
    background-color: #EDEFF0; 
    border-bottom-style:inset; 
    border-color: #C7C9C9; 
} 

#Nav p { 
    width: 70px; 
    height: 20px; 
    margin-top: 27.5px; 
    float: left; 
    font-size: 20px; 
    font-family: sans-serif; 
    color:#374048; 
} 

#Nav ul { 
    list-style-type: none; 
    display: inline; 
} 

#Nav li { 
    float: right; 
    margin: 30px 5px 0px 5px; 
} 

.box { 
    height: 300px; 
    width: 500px; 
    border-style: solid; 
    border: 0px .5px 2px .5px; 
    border-color: #C7C9C9; 
    border-radius: 4px; 
    padding: 0; 
} 

#Box1 { 
    float:right; 
    background-color: #FFFFFF; 
    margin: 15px 25px 15px 12.5px; 
} 

#Box1 .header1 { 
    height: 60px; 
    width: inherit; 
    padding: 0; 
    margin: 0px 0px 240px 0px; 
    background-color: #FF81AD; 
} 

#Box2 { 
    float:left; 
    background-color: #FFFFFF; 
    margin: 15px 12.5px 15px 25px; 
} 

#Box2 .header2 { 
    height: 60px; 
    width: inherit; 
    padding: 0; 
    margin: 0px 0px 240px 0px; 
    background-color: #009E77; 
} 


#Box3 { 
    float:right; 
    background-color: #FFFFFF; 
    margin: 15px 25px 15px 12.5px; 
} 

#Box3 .header3 { 
    height: 60px; 
    width: inherit; 
    padding: 0; 
    margin: 0px 0px 240px 0px; 
    background-color: #009E77; 
} 

#Box4 { 
    float:left; 
    background-color: #FFFFFF; 
    margin: 15px 12.5px 15px 25px; 
} 

#Box4 .header4 { 
    height: 60px; 
    width: inherit; 
    padding: 0; 
    margin: 0px 0px 240px 0px; 
    background-color: #8685CB; 
} 

.box .time { 
    font-family: sans-serif; 
    font-weight: bold; 
    font-size: 12px; 
    color: #FFFFFF; 
    float: right; 
    margin-right: 30px; 
    margin-top: 22px; 
} 

button { 
    background-color: #C7C9C9; 
    border: none; 
    color: white; 
    padding: 10px 20px; 
    text-align: center; 
    display: inline; 
    font-size: 12px; 
    } 

.box .btn { 
    height: 35px; 
    width: 100px; 
    margin: 0px 0px 100px 140px; 
}

来源

2016-02-12 wren

这是因为你有大量的保证金。减少它，按钮将显示在div内。

当前margin: 0 0 240px;将其更改为margin: 0 0 200px;。

而对于相同的CSS不使用不同的类为所有四个div做一个共同的类。

喜欢，在给定的小提琴。

.hdiv{ 
    height: 60px; 
    width: inherit; 
    padding: 0; 
    margin: 0px 0px 200px 0px; 
}

Working Fiddle

来源

2016-02-12 03:43:29 ketan

CSS选择器（我认为） - 按钮不会进入Div元素？

回答

相关问题