英文:
why my svg icon is not show in a section next to input?
问题
我的图标未显示。 但如果我将输入字段的宽度从100％减少到90％，然后它就会显示。 我做错了什么？
<section class="flex jc">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="#333" style="color:#333" height="15" width="15" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-miterlimit="10" stroke-width="32" d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z"></path><path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M338.29 338.29L448 448"></path></svg>
<input type="text" name="search">
</section>
英文:
my icon is not showing. But if I reduce the width of my input field from 100% to 90% then it shows. What I am doing wrong ?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.flex {
display: flex;
align-items: center;
}
.jc {
justify-content: center;
}
<!-- language: lang-html -->
<section class="flex jc">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="#333" style="color:#333" height="15" width="15" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-miterlimit="10" stroke-width="32" d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z"></path><path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M338.29 338.29L448 448"></path></svg>
<input type="text" name="search">
</section>
<!-- end snippet -->
答案1
得分: 1
将图标的宽度设置为15像素，将输入字段的宽度设置为100%减去15像素。
.icon {
width: 15px;
}
input {
width: calc(100% - 15px);
}
这段代码将图标的宽度设置为15像素，然后使用CSS calc 函数将输入字段的宽度设置为100%减去15像素。
英文:
set the icon width to 15px and the input field width to 100% - 15px
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.flex {
display: flex;
align-items: center;
}
.jc {
justify-content: center;
}
.icon {
width: 15px;
}
input {
width: calc(100% - 15px);
}
<!-- language: lang-html -->
<section class="flex jc">
<svg class="icon" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="#333" style="color:#333" height="15" width="15" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-miterlimit="10" stroke-width="32" d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z"></path><path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M338.29 338.29L448 448"></path></svg>
<input type="text" name="search">
</section>
<!-- end snippet -->
答案2
得分: -1
你的SVG图标已经在section标签中。
英文:
Your SVG Icon is already in section tag
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论