html - 如何在 vue.js 中为搜索占位符提供搜索图标之间的空间？

Question

我在里面开发了一个顶部导航栏，它包含搜索栏，我想在搜索输入框中添加搜索图标，我想在占位符和图标之间提供适当的间距 [我需要这样] 1，我正在尝试很多方法但它不能正常工作，如何实现这个东西，请帮我解决这个问题[像这样我得到输出] 2 Dashboard.vue

<template>
<div class="main">
    <nav class="navbar navbar-default">
        <div class="navbar-header">
            <img src="../assets/education.png" id="brand-logo" alt="notFound" />
        </div>
        <ul class="nav navbar-nav">
            <li>
                <p>Bookstore</p>
            </li>
        </ul>
        <div class="input-group">
             <i class="fas fa-search"></i>
            <div class="form-outline">
                <input type="search" id="form1" class="form-control" placeholder='search...' />
               
            </div>
        </div>
    </nav>

</div>
</template>

<script>

</script>

<style lang="scss" scoped>
@import "colors";
.navbar-default {
    background: $redish_brown;
    height: 60px;
}
li p {
    margin-top: 5px;
    margin-left: -1250px;
    width: 91px;
    height: 26px;
    text-align: left;
    font: normal normal normal 18px/26px Roboto;
    letter-spacing: 0px;
    color: $pale_white;
    text-transform: capitalize;
    opacity: 1;
}
img {
    background: transparent 0% 0% no-repeat padding-box;
    opacity: 1;
    width: 31px;
    height: 24px;
    margin-top: -12px;
    margin-left: 194px;
}
.input-group{
    margin-left:345px;
}
input[type="search"]{
    width: 490px;
    height: 33px;
    margin-top:-40px;
    background: #FCFCFC 0% 0% no-repeat padding-box;
    border-radius: 3px;
    opacity: 1;
}
.fa-search{
    width: 5px;
    height: 5px;
    // background: #9D9D9D 0% 0% no-repeat padding-box;
    opacity: 1;
    margin-top: -30px;
    position: relative;
   padding-left:20px;
}
</style>

标签： htmlcssvue.jssass

Answer 1

我建议这样做：

.input-group {
  display: flex;
  align-items: center; // to center the icon vertically
}

.input-group .fas {
  position: absolute;
  margin-left: 8px;
}

.input-group input[type="search"] {
  padding: 8px 8px 8px 32px;
}

结果：

Flexbox 成为你的朋友。如果您开始使用弹性框（或网格）来设计布局（而不是使用负边距来放置每个元素），那也会更好。这是一个很好的指南：https ://css-tricks.com/snippets/css/a-guide-to-flexbox/