gpt4 book ai didi

HTML 内联 svg 内容错位

转载 作者:太空宇宙 更新时间:2023-11-04 15:17:47 25 4
gpt4 key购买 nike

如果您查看以下 html http://jsfiddle.net/aLcxj/ + 和 T 图标的位置比它们应有的位置低一位(它们位于其父图标之外)。
html:

<ul class="Grid">
<li>
<span>Test1</span>
<ul class="Manage">
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52.334 52.334" version="1.1" ><path d="m 19.833 0 l 12.667 0 l 0 19.834 l 19.834 0 l 0 12.667 l -19.834 0 l 0 19.832 l -12.667 0 l 0 -19.832 l -19.833 0 l 0 -12.667 l 19.833 0 Z" /></svg>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.812 32.617" version="1.1"><path d="m 29.7119 0 l 1.05591 0.01221 l 0.43335 0.427245 l 0.494385 3.50342 l 0.115966 4.01611 L 31.7017 8.55713 L 31.2012 8.78906 L 30.4504 8.71582 L 30.0049 8.10547 L 28.8574 5.40162 L 27.5146 3.78418 L 26.326 3.13263 L 24.762 2.66724 L 22.8226 2.388 l -2.31476 -0.09308 l -1.5686 0.109864 l -0.653076 0.32959 l -0.07324 0.415039 l 0 24.3408 l 0.183105 1.32752 l 0.549316 0.857543 l 1.09253 0.595093 l 1.81274 0.540161 l 0.726318 0.164795 l 0.323487 0.10376 l 0.24414 0.927734 l -0.537109 0.610352 l -0.274658 -0.0061 l -0.726319 -0.06714 l -5.88379 -0.292969 l -4.76074 0.244141 l -1.29395 0 l -0.317383 -0.585938 l 0.115967 -0.653076 l 0.738525 -0.396728 l 1.75781 -0.592041 l 1.07422 -0.701905 l 0.622559 -1.11694 l 0.20752 -1.64185 l 0 -23.6572 L 13.6475 2.5879 L 12.9883 2.31934 L 12.5793 2.30103 L 11.5479 2.29493 L 7.51953 2.69776 L 4.71192 3.90626 L 3.14331 5.60304 L 1.75781 8.30079 L 1.26343 8.96607 L 0.610354 8.95997 L 0.0427246 8.63647 L 0 8.05664 L 0.640869 4.87671 L 0.854492 0.610351 L 1.22681 0.213624 L 2.34375 0.146484 L 7.89795 0.402832 L 14.0137 0.488282 L 19.5358 0.457762 L 23.9929 0.366212 L 27.3849 0.213625 L 29.7119 2e-006 Z" /></svg>
</li>
</ul>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52.334 52.334" version="1.1"><path d="m 19.833 0 l 12.667 0 l 0 19.834 l 19.834 0 l 0 12.667 l -19.834 0 l 0 19.832 l -12.667 0 l 0 -19.832 l -19.833 0 l 0 -12.667 l 19.833 0 Z" /></svg>
</li>
</ul>

CSS:

body {
fill: white;
color: white;
background-color: black;
font-size: 2em;
font-family: "Segoe UI", "Segoe UI Light", "Verdana", "Arial", "Helvetica";
letter-spacing: 1px;
}

.Grid > li {
background-color: rgb(229, 20, 0);
width: 5em;
height: 5em;
list-style-type: none;
float: left;
padding: 0.25em;
margin: 0.25em;
position: relative;
}

.Grid > li > span {
left: 0.25em;
bottom: 0.25em;
position: absolute;
}

.Grid > li > .Manage {
top: 0.25em;
right: 0.25em;
bottom: 0.25em;
position: absolute;
}
.Grid > li > .Manage > li {
width: 0.5em;
height: 0.5em;
display: block;
list-style-type: none;
}

这似乎与父 li 元素的宽度和高度有关,如果我将宽度和高度更改为 1em 而不是 0.5em,那么它们就会正确放置。

它在 IE9、Opera、Chrome 中的行为方式相同..

我做错了什么?

enter image description here enter image description here

最佳答案

SVG 的初始显示值为 inline,因此它的行为类似于文本。如果你用纯文本替换你的 SVG,你会得到相同的结果,因为它受行高的影响。要克服这个问题,只需设置 svg {display: block;}

关于HTML 内联 svg 内容错位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13168285/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com