如何将边缘添加到带有CSS背景图像的按钮？

我有一个带有搜索图标背景图像的按钮，但我无法添加margin-bottom以将文本区域与按钮对齐。为什么添加一个margin-bottom到按钮不能做任何事情？或者，将textarea与按钮对齐的正确方法是什么？如何将边缘添加到带有CSS背景图像的按钮？

.input-area { 
 
    width: 100%; 
 
    height: 46px; 
 
} 
 

 
.parse-text-button { 
 
    background: url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-32.png) no-repeat; 
 
    width: 24px; 
 
    height: 24px; 
 
    border: none; 
 
    margin-bottom: 10px; 
 
}

<div class="input-area"> 
 
    <textarea class="input" placeholder="Enter text here"></textarea> 
 
    <button class="parse-text-button" type="submit"></button> 
 
</div>

来源

2017-09-04 irregular

如果你希望能够在第二个元素手动定位，我会建议结合使用position: relative带有负top。这允许完全控制恰好其中图像坐：

.input-area { 
 
    width: 100%; 
 
    height: 46px; 
 
} 
 

 
.parse-text-button { 
 
    background: url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-32.png) no-repeat; 
 
    width: 24px; 
 
    height: 24px; 
 
    border: none; 
 
    position: relative; 
 
    top: -11px; 
 
}

<div class="input-area"> 
 
    <textarea class="input" placeholder="Enter text here"></textarea> 
 
    <button class="parse-text-button" type="submit"></button> 
 
</div>

或者，也可以通过给所述第二元件vertical-align: top对齐在顶部的两个要素。这将图像的顶部对齐到textarea的顶部，但如果元素的高度不同（如您的示例中所示），可能会导致问题。

但是，考虑到您的图片一点点从它的边界偏移，您可以选择使用这种方法来保存一行代码：

.input-area { 
 
    width: 100%; 
 
    height: 46px; 
 
} 
 

 
.parse-text-button { 
 
    background: url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-32.png) no-repeat; 
 
    width: 24px; 
 
    height: 24px; 
 
    border: none; 
 
    vertical-align: top; 
 
}

<div class="input-area"> 
 
    <textarea class="input" placeholder="Enter text here"></textarea> 
 
    <button class="parse-text-button" type="submit"></button> 
 
</div>

希望这有助于！ :)

来源

2017-09-04 03:03:05

我找到了位置：相对安静有帮助！我不太清楚为什么，但与位置相关，如果我调整textarea的大小，搜索图标将沿着文本框的右下角，这是非常好的。 https://jsfiddle.net/cvczx8st/6/ – irregular

你可以只使双方<textarea>和<button>inline-block的所以你可以使用垂直对齐：中间这将使这两个元素垂直居中;

textarea { 
    display: inline-block; 
    vertical-align: middle; 
} 

.parse-text-button { 
    display: inline-block; 
    verical-align: middle; 
}

还确保在两个元素中删除所有不必要的余量顶部或底部。

希望帮助

来源

2017-09-04 02:58:33 masterpreenz

这似乎在这里工作得不好。 https://jsfiddle.net/cvczx8st/5/ – irregular

@irregular正如我所说的，你需要让它们都是内嵌块和垂直对齐：中间。我的意思是'textarea'和'按钮' – masterpreenz

有实际上是在底部的利润率，但其扩展图标和文本区域下方 - 你可以看到它，如果你在元素督察检查。

我猜你真正想知道的是如何停止按钮对齐底部。

您可以简单地使用vertical-align来对齐它，例如，

.input-area { 
 
    width: 100%; 
 
    height: 46px; 
 
} 
 

 
.parse-text-button { 
 
    background: url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-32.png) no-repeat; 
 
    width: 24px; 
 
    height: 24px; 
 
    border: none; 
 
    vertical-align: top; /* align to the top */ 
 
    margin-top: 4px; /* add a little extra space to the top for 'padding' */ 
 
}

<div class="input-area"> 
 
    <textarea class="input" placeholder="Enter text here"></textarea> 
 
    <button class="parse-text-button" type="submit"></button> 
 
</div>

来源

2017-09-04 03:01:09 FluffyKitten

使用垂直对齐

.parse-text-button { 
    background: 
    url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-32.png) no-repeat; 
    width: 24px; 
    height: 24px; 
    border: none; 
    margin-bottom: 10px; 
    vertical-align:top; 
}

来源

2017-09-04 03:01:16 davidatthepark

-1

这里的解决方案

.stylish-input-group .input-group-addon{ 
 
    background: white !important; 
 
} 
 
.stylish-input-group .form-control{ 
 
\t border-right:0; 
 
\t box-shadow:0 0 0; 
 
\t border-color:#ccc; 
 
} 
 
.stylish-input-group button{ 
 
    border:0; 
 
    background:transparent; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="container"> 
 
\t <div class="row"> 
 
     <div class="col-sm-6 col-sm-offset-3"> 
 
      <div id="imaginary_container"> 
 
       <div class="input-group stylish-input-group"> 
 
        <input type="text" class="form-control" placeholder="Search" > 
 
        <span class="input-group-addon"> 
 
         <button type="submit"> 
 
          <span class="glyphicon glyphicon-search"></span> 
 
         </button> 
 
        </span> 
 
       </div> 
 
      </div> 
 
     </div> 
 
\t </div> 
 
</div>

来源

2017-09-04 03:02:48

如何将边缘添加到带有CSS背景图像的按钮？

回答

相关问题