我是HTML和CSS的新手,我正尝试从头开始创建我的第一个静态网站。
我有一个div元素,其中包含2个元素的内联列表,每个元素都包含与图像的链接。
所有大小均以百分比表示,从div元素开始,所有内容都将适应其包含的元素。仅列表将div拆分为2。
即使将link元素指定为max-width = 100%和max-height = 100%,当我在Firefox中进行检查时,该链接元素仍在其包含li元素的外部呈现。 这将导致其中包含的图像出现在列表之外,从而出现在框之外。
如何确保链接和图像适合li框内?
编辑:添加了HTML和CSS元素
相关HTML
<div id="delivery">
<div id="ta">
Bagel<br/>Angels
</div>
<div id="tu">
<ul id="take" >
<li class="delivery"><a href="link" class="delivery">
<img src="images/deliveroo.svg" alt="Deliveroo delivery" class="delivery" id="deliveroo">
</a></li>
<li class="delivery"><a href="link" class="delivery">
<img src="images/Takeaway.svg" alt="Takeaway delivery" class="delivery" id="takeaway">
</a></li>
</ul>
</div>
<div id="tb">
<span>Bagel<br/>Angels</span>
</div>
</div>
相关CSS:我将媒体标签用于桌面视图,因为这是发生问题的原因,一切都可以在移动设备上正常运行。
div#delivery {
position: fixed;
border-style: ridge ridge ridge none;
border-radius: 0px 20px 20px 0px;
background-image: linear-gradient(to top right, lightgray , white);
bottom: 1%;
left: 0%;
width: 20%;
}
div#ta {
margin: 5% 5% 5% 5%;
text-align: center;
}
div#tb {
display: none;
}
ul#take {
list-style: none;
margin: 0;
padding: 0;
}
img#deliveroo {
width: 70%;
height: auto;
display: block;
position: relative;
margin: 0px auto;
}
img#takeaway {
width: 100%;
height: auto;
display: block;
position: relative;
margin: 0px auto;
}
li.delivery {
margin: 10% 0% 0% 0%;
}
@media only screen and (min-width: 768px) {
div#delivery {
/* left: -24%; */
transition: 0.3s;
width: 40%;
height: 10%;
bottom: 40%;
}
div#delivery:hover {
left: 0;
}
div#ta {
display: none;
}
div#tb {
width: 20%;
height: 100%;
display: table;
float: right;
text-align: center;
}
div#tb span {
display: table-cell;
vertical-align: middle;
}
div#tu {
position: relative;
float: left;
width: 80%;
height: 100%;
}
ul#take {
position: relative;
max-width: 100%;
height: 100%;
}
li.delivery {
position: relative;
margin: 0;
float: left;
max-height: 100%;
max-width: 50%;
}
a.delivery {
position: relative;
display: block;
max-width: 100%;
max-height: 100%;
}
img#deliveroo {
display: inline-block;
width: initial;
height: initial;
max-width: 100%;
max-height: 100%;
}
img#takeaway {
width: initial;
height: initial;
max-width: 100%;
max-height: 100%;
}
}
我知道我在这里滥用ID,但是一旦知道它可以完成我想要的操作,我将在以后重新格式化。