У меня есть четкие кнопки, которые необходимо расположить во входных коробках.Невозможно правильно установить кнопку очистки
Основная проблема заключается в том, что ориентация формы изменяется в зависимости от размера экрана.
Link to DEMO2 (vanburenx's answer)
Я прочитал следующие вопросы, но в Аль l из них форма горизонтальная или вертикальная. 1234
Код
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.2.1/bootstrap-social.css">
<style>
.top-container {
width: 76%;
float: left;
height: 100%;
padding-right: 45px;
}
.links a, .login button, .login input{
display: inline-block
}
.login-form-input {
width: 100%;
height: 40px;
border: 1px solid #000;
-webkit-box-shadow: none;
box-shadow: none;
margin-bottom: 10px;
margin-left: 3px;
}
@media only screen and (max-width:600px) {
.login input {
width: 100%
}
}
@media (min-width :601px) and (max-width :767px) {
.login input {
width: 44%
}
}
@media (min-width :768px) and (max-width :900px) {
.login input {
width: 49%;
}
}
@media (min-width :1200px){
.login input {
width: 45%;
}
}
.searchclear {
position:absolute;
right:5px;
top:0;
bottom:0;
height:14px;
margin:auto;
font-size:14px;
cursor:pointer;
color:red;
}
</style>
</head>
<body>
<header>
<div class="top">
<div class="top-container">
<div class="login">
<form id="myForm" role="form" action="#" method="GET">
<input id="input1" name="input1"
class="form-control login-form-input searchinput" type="text" value="">
<span class="searchclear glyphicon glyphicon-remove-circle" style="display:block"></span>
<input id="input2" name="input2" class="form-control login-form-input searchinput"
type="text" value="">
<span class="searchclear glyphicon glyphicon-remove-circle" style="display:block"></span>
<button class="submit-button" type="submit" title="Submit">
<div>Submit
</div>
</button>
</form>
</div>
</div>
</div>
</header>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".searchinput").keyup(function() {
$(this).next().toggle(Boolean($(this).val()));
});
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function() {
$(this).prev().val('').focus();
$(this).hide();
});
});
</script>
</body>
</html>
вы знаете, его легче для нас, чтобы помочь, если вы показать нам, что вы хотите, чтобы выглядеть, и создать jsfiddle того, что у вас есть сейчас, и мы можем помочь вам гораздо быстрее сюда. Вставка всего кода делает это сложнее, чем нужно –
@AbdulAhmad благодарит за ваше предложение. У меня нет JSFiddle, который обновит вопрос при его создании. –
демо-версия @AbdulAhmad включена. –