如何在 vue.js 中的搜索占位符和搜索图标之间提供空格？答案

【问题标题】：How to provide space between search icon to the search place holder in vue.js?如何在 vue.js 中的搜索占位符和搜索图标之间提供空格？
【发布时间】：2021-09-13 16:07:55
【问题描述】：

我在里面开发了一个顶部导航栏，它包含搜索栏，我想在搜索输入框中添加搜索图标，我想在占位符和图标之间提供适当的间距 [like this i need ]1，我是尝试了很多方法但它不能正常工作，如何实现这个东西，请帮我解决这个问题[like this i am getting output]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>

【问题讨论】：

在input[type="search"] 内可以添加margin-left: 8px;。您当然可以更改8px 以满足您的要求。
@Chin.Udara，我需要搜索占位符到图标之间的空间，而不是搜索框到图标
在输入中添加padding-left 是否有效？
@GucciBananaKing99，这里 padding-left 用于在搜索框和 BOOkStore
标签之间提供空间

标签： html css vue.js sass

【解决方案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/

【讨论】：