Question

我有一个带有搜索图标背景图片的按钮，但我无法添加margin-bottom以将文本区域与按钮对齐。为什么在按钮上添加.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; }没有做任何事情？或者将textarea与按钮对齐的正确方法是什么？

＆＃13;

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

＆＃13;

npm install node-waves

＆＃13;

Answer 1

如果您希望能够手动定位第二个元素，我建议您将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来对齐顶部的两个元素。这会将图像的顶部与文本区域的顶部对齐，但如果元素具有不同的高度，则可能会导致问题（如示例所示）。

但是，考虑到您的图像与其边界稍微偏移，您可以选择使用此方法来保存一行代码：

.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>

希望这有帮助！：）

Answer 2

您可以同时制作<textarea>和<button> inline-block ，这样您就可以使用 vertical-align：middle 元素垂直居中;

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

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

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

希望有所帮助

Answer 3

底部实际上有一个边距，但它在图标和文本区域下面延伸 - 如果你在元素检查器中检查它，你可以看到它。

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

您只需使用vertical-align对齐即可，例如

＆＃13;

.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' */
}

＆＃13;

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

＆＃13;

Answer 4

使用垂直对齐

.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;
}

Answer 5

此解决方案

＆＃13;

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

＆＃13;

<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">
	<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>
	</div>
</div>

＆＃13;

如何为带有CSS背景图像的按钮添加边距？

5 个答案: