我创建了一个我的问题的例子:
问题在于,当我将div包装在链接标签中时,链接并非完全包装所以如果您看一下小提琴,您会看到前两个被包裹在链接中,但您会注意到它是链接,但在它下面和下面的div顶部有另一个超链接,所以它几乎失去了某个地方,但我不知道为什么?
企业 养老院 餐饮企业 日托儿所 狗窝&猫舍 邮局&商店/ * CSS开始 - 编码形式最小到最大的屏幕尺寸! * /
/* Smartphones (portrait) */
body{
margin: 0;
}
#menumobile{
background-color: #FFF;
text-align:center;
}
#menularge{
height: 0px;
}
#nav-mobile {
display: block;
padding-top: 12px;
height: auto;
min-height: 33px;
overflow: hidden;
font-size: 0.9em;
background: none;
}
#nav-mobile, #nav-mobile ul, #nav-mobile li {
position: relative;
background: none;
}
#nav-mobile ul {
margin: 0;
padding: 0;
width: 100%;
background-color: #F1F1F1;
padding: 20px 0 20px 0;
}
#nav-mobile ul li {
width: 100%;
display: block;
padding: 13px 0 13px 0;
margin: 0;
background: none;
}
#nav-mobile ul a{
color: #000;
text-decoration:none;
font-size: 18px;
}
#nav-mobile ul a:hover {
background: none;
color: #FFF;
}
#nav-mobile ul li:hover {
background-color: #005e48;
color: #FFF;
}
header{
height: 150px;
background: #FFF url('../childcare.jpg');
background-size: 100%;
padding: 20px;
}
#wrapper{
width:100%;
padding: 30px;
}
.greenbartop{
background-color: #005e48;
padding: 30px 0px 30px 0px;
width: 100%;
}
.greenbartop h2{
text-align:center;
color: #FFF;
font-size: 20px;
}
.intromobile{
background-color: #FFF;
height: auto;
padding: 60px 30px 60px 30px;
}
.intromobile p{
text-align:justify;
font-size: 19px;
line-height: 30px;
}
.categorylist {
background-color: #FFF;
height: auto;
padding: 0px;
text-align: center;
}
.categorypost {
height: 200px;
margin-bottom: 20px;
width: 360px;
display:inline-block;
}
.greenbarbottom{
background-color: #005e48;
padding: 30px 0px 30px 0px;
width: 100%;
}
.greenbarbottom h2{
text-align:center;
color: #FFF;
font-size: 20px;
}
.spotlight{
background-color: #FFF;
height: auto;
padding: 40px 0 40px 0;;
text-align: center;
}
.spotlight h3{
text-align:left;
}
.spotlight p{
text-align:left;
font-size: 20px;
line-height: 30px;
}
.spotlightpost{
height: auto;
background-color: transparent;
border: thin solid #aaa;
margin-bottom: 20px;
padding: 10px;
width: 340px;
display:inline-block;
}
footer{
background-color: #000;
width: 100%;
padding: 40px 0px 40px 0px;
}
footer p{
color: #FFF;
text-align:left;
}
.footerwarpper{
width: 900px;
}
/* Ipad (portrait) ----------- */
@media only screen and (min-width : 768px){
body{
background-color: yellow;
}
nav{
background-color: #FFF;
height: auto;
text-align:center;
}
#menularge{
background-color: #FFF;
padding: 20px 0 20px 0;
display: visible;
}
header{
height: 400px;
background-color: #FFF;
}
#nav-mobile{
display: none;
}
greenbartop{
background-color: #005e48;
padding: 30px 0px 30px 0px;
width: 100%;
}
.greenbartop h2{
font-size: 24px;
}
.intromobile{
display: none;
}
.intromobile p{
display: none;
}
.categorylist {
background-color: #FFF;
height: auto;
text-align: center;
padding-left:40px;
padding-top: 100px;
padding-bottom: 80px;
}
.categorypost {
height: 210px;
background-color:red;
margin-bottom: 40px;
margin-right: 40px;
width: 320px;
display:inline-block;
}
.spotlight{
background-color: #FFF;
height: auto;
text-align: center;
padding-top: 80px;
padding-bottom: 80px;
}
.spotlight h3{
text-align:left;
}
.spotlight p{
text-align:left;
font-size: 20px;
line-height: 30px;
}
.spotlightpost{
height: auto;
background-color: transparent;
display:inline-block;
width: 660px;
}
}
/* Ipad (paysage) ----------- */
@media only screen and (min-width : 1024px){
body{
background-color: blue;
}
}
/* Desktop ----------- */
@media only screen and (min-width : 1224px){
body{
background-color: green;
}
}
答案 0 :(得分:1)
您还没有关闭在前两个<div>
后围绕每个display:inline-block
的锚标记
为包装锚标记添加{{1}}和边距,并从div中删除边距。