У меня есть кнопка с фоновым изображением значка поиска, но я не могу добавить margin-bottom для выравнивания текстовой области с кнопкой. Почему добавление 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;
}
<div class="input-area">
    <textarea class="input" placeholder="Enter text here"></textarea>
    <button class="parse-text-button" type="submit"></button>
</div>
0
irregular 4 Сен 2017 в 05:54

5 ответов

Лучший ответ

Если вы хотите иметь возможность вручную позиционировать второй элемент, я бы рекомендовал использовать 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>

Надеюсь это поможет! :)

1
Obsidian Age 4 Сен 2017 в 03:08

На самом деле есть поле внизу, но оно простирается под значком и текстовой областью - вы можете увидеть это, если отметите его в инспекторе элементов.

Я предполагаю, что вы действительно хотите знать, как остановить выравнивание кнопки снизу.

Вы можете просто использовать 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>
0
FluffyKitten 4 Сен 2017 в 03:07

Вы можете просто сделать <textarea> и <button> inline-block , чтобы вы могли использовать vertical-align: middle , что сделает оба элемента по центру по вертикали ;

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

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

Также убедитесь, что убрали все ненужные поля сверху или снизу в обоих элементах.

Надеюсь, это поможет

0
masterpreenz 4 Сен 2017 в 03:06

Здесь решение

.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;
}
<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>
-1
Harish Karthick 4 Сен 2017 в 03:02

Использовать вертикальное выравнивание

.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;
}
0
davidatthepark 4 Сен 2017 в 03:01