css для кнопки и текстового поля

Question

Я хочу отобразить кнопку с правой стороны и текстовое поле, как показано в макете. Но теперь я получил ссылку.

.search, 
 
    .add { 
 
    float: right; 
 
    margin-left: 9px; 
 
    } 
 
    .sxt { 
 
    float: right; 
 
    }

<input class="stxt" type="text" name="searchtxt"> 
 
<a style="padding-right:2ex;"></a> 
 
<button name="search" class="search">Search</button>

Answer 1

сделать некоторые изменения в вашем CSS и обновлять его как ниже код

.search,.add{ 
 
float: left; 
 
margin-left: 9px; 
 
background: #85BD02; 
 
border: 0; 
 
padding: 5px 10px; 
 
border-radius: 5px; 
 
color: white; 
 
} 
 

 
.sxt{ 
 
float: right; 
 
}

<div style="width: 50%;margin: auto;"> 
 
<input class="stxt" type="text" name="searchtxt"> 
 
<a style="padding-right:2ex;"></a><button name="search" class="search">Search</button> 
 
    </div>

проверка jsfiddle: http://jsfiddle.net/2essewv0/2/

Answer 2

<style type="text/css"> 
    .search_box{ 
     width: 180px; 
     height: 50px; 
    } 
    .inputbox{ 
     float: left; 
     width: 100px; 
    } 
    .inputbox input{ 
     width: 100%; 
     height: 25px; 
    } 
    .search_button{ 
     float: right; 

    } 
    .search_button button{ 
     background-color: #86BE03; 
     color: white; 
     font-weight: bold; 
     border: none; 
     padding: 4px 4px; 
     font-size: 16px; 
     border-radius: 6px; 
    } 
</style> 

HTML

   <div class="search_box"> 
        <div class="inputbox"> 
         <input type="text"> 
        </div> 
        <div class="search_button"> 
         <button type="submit" value="search">search</button> 
        </div> 
       </div>   

Answer 3

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

Answer 4

Не плавайте элементы, так как это может привести к проблемам, возникающим в дальнейшем по линии с учетом макета/и т. Д.

Вы можете использовать позиционирование по умолчанию вместо (удаление поплавок вообще):

.search button { 
 
    height: 30px; 
 
    background: #85BD02; 
 
    border: 0; 
 
    padding: 5px 10px; 
 
    border-radius: 5px; 
 
    color: white; 
 
    transition: all 0.6s; 
 
} 
 
.search input { 
 
    height: 25px; 
 
    transition: all 0.6s; 
 
    box-shadow:none; 
 
} 
 
.search button:hover, 
 
.search input:hover { 
 
    box-shadow: 1px 1px 2px black; 
 
}

<div class="search"> 
 
    <input type="text" placeholder="seach me" /> 
 
    <button>SEARCH</button> 
 
</div>

Answer 5

Браузеры визуализации элементов рядом друг с другом по умолчанию, если явно не указано.

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

Вы можете просто поставить HTML, как

<input class="stxt" type="text" name="searchtxt"> 
<button name="search" class="search">Search</button> 

, и вы заметите, что текстовое поле и кнопка в макете потока и рядом друг с другом.

Надеюсь, это ответит на ваш вопрос.

Answer 6

Вы ошибочно указали имя класса ввода текстового поля. Вы использовали .sxt, но в своем html вы использовали имя класса как .stxt. Так что просто замените, как показано ниже существующего стиля CSS:

.stxt{float:right;}