フォーム要素を1行にすることはできませんし、応答もありますか？

私はフォームの要素を1行にとどめて、すべてのタイプの解像度で同じように保つようにしています。つまり、画面の解像度を最小限に抑えようとすると、私はそれが同じようにしたくないので、検索ボタンは2番目の行に行きます。私はそれが同じ状態、つまりウィンドウがあるときでさえも入力の隣にとどまるためにSearchボタンを使いたいと思っています最小化されたので、それはどれほど簡単に達成可能でしょうか？私はそれがCSSのメディアクエリを使用して達成することができることを知っている..！フォーム要素を1行にすることはできませんし、応答もありますか？

LIVEページリンク：http://huntedhunter.com/extratorrent/

ここ

ですコード：

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 
    <div style="padding: 7%;margin-top: 100px;"> 
     <h1>E<span>XTRATORRENT</span> A<span>UTOMATIC</span> D<span>OWNLOADER</span></h1> 
     <form> 
      <input class="icon" name="search" placeholder="Search Torrent Name" type="text"> <input class="btn btn-secondary" name="search" type="submit" value="Search"> 
     </form> 
    </div> 
    <footer class="footer"> 
     <p>Copyrighted By <strong><a href="http://www.huntedhunter.com">Hunted Hunter Solutions</a></strong>.A Script By <a href="http://stackoverflow.com/users/2298933/umair-shah-yousafzai?tab=profile"><strong>Umair Shah Yousafzai</strong></a></p> 
    </footer> 
</body> 
</html>

CSS：ここ

はGIFです

input[type=text].icon { 
    width: 89%; 
    padding: 12px 20px; 
    box-sizing: border-box; 
    border: 2px solid #ccc; 
    border-radius: 4px; 
    font-size: 16px; 
    background-color: white; 
    background-image: url(searchicon.png); 
    background-position: 10px 13px; 
    background-repeat: no-repeat; 
    padding-left: 42px; 
    } 

    h1 { 
    font-family: Arial; 
    opacity: 0.6; 
    text-align: center; 
    } 
    span { 
    font-size: 70%; 
    } 
    .footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 60px; 
    background-color: #eee2e2; 
    margin-left: -0.5%; 
    } 

    body { 
    overflow-x: hidden; 
    } 

    p { 
    text-align: center; 
    font-family: Arial; 
    opacity: 0.7; 
    } 
    a { 
    text-decoration: none; 
    } 

    .btn-secondary:hover { 
    color: #292b2c; 
    background-color: #e6e6e6; 
    border-color: #adadad; 
    cursor: pointer; 
    } 
    .btn:focus, .btn:hover { 
    text-decoration: none; 
    } 
    [type=reset], [type=submit], button, html [type=button] { 
    -webkit-appearance: button; 
    } 
    .btn-secondary { 
    color: #292b2c; 
    background-color: #fff; 
    border-color: #adadad; 
    } 
    .btn { 
    border: 1px solid turquoise; 
    padding: 1.2% 1.5rem; 
    font-size: 1rem; 
    border-radius: .25rem; 
    -webkit-transition: all .2s ease-in-out; 
    -o-transition: all .2s ease-in-out; 
    transition: all .2s ease-in-out; 
    }

出典

2017-03-06 Umair Shah Yousafzai

関連コードの最小限のバージョンを投稿できますか？ –

これにはflex-boxを使用できます。

ルールと一緒に、あなたの<form>タグに.flexクラスを追加します。

.flex { 
    display:flex; 
    flex-wrap:nowrap; 
    justify-content:center;  
}

最後に.btnセレクタ

に flex-grow:1;と margin-left:5px;を追加し、 input[type=text].iconセレクタに flex-grow:4;と width: 89%;を置き換えます

input[type=text].icon { 
 
    flex-grow: 4; 
 
    padding: 12px 20px; 
 
    box-sizing: border-box; 
 
    border: 2px solid #ccc; 
 
    border-radius: 4px; 
 
    font-size: 16px; 
 
    background-color: white; 
 
    background-image: url(searchicon.png); 
 
    background-position: 10px 13px; 
 
    background-repeat: no-repeat; 
 
    padding-left: 42px; 
 
} 
 

 
h1 { 
 
    font-family: Arial; 
 
    opacity: 0.6; 
 
    text-align: center; 
 
} 
 

 
span { 
 
    font-size: 70%; 
 
} 
 

 
.footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 60px; 
 
    background-color: #eee2e2; 
 
    margin-left: -0.5%; 
 
} 
 

 
body { 
 
    overflow-x: hidden; 
 
} 
 

 
p { 
 
    text-align: center; 
 
    font-family: Arial; 
 
    opacity: 0.7; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
.btn-secondary:hover { 
 
    color: #292b2c; 
 
    background-color: #e6e6e6; 
 
    border-color: #adadad; 
 
    cursor: pointer; 
 
} 
 

 
.btn:focus, 
 
.btn:hover { 
 
    text-decoration: none; 
 
} 
 

 
[type=reset], 
 
[type=submit], 
 
button, 
 
html [type=button] { 
 
    -webkit-appearance: button; 
 
} 
 

 
.btn-secondary { 
 
    color: #292b2c; 
 
    background-color: #fff; 
 
    border-color: #adadad; 
 
} 
 

 
.btn { 
 
    flex-grow: 1; 
 
    margin-left: 5px; 
 
    border: 1px solid turquoise; 
 
    padding: 1.2% 1.5rem; 
 
    font-size: 1rem; 
 
    border-radius: .25rem; 
 
    -webkit-transition: all .2s ease-in-out; 
 
    -o-transition: all .2s ease-in-out; 
 
    transition: all .2s ease-in-out; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
    flex-wrap: nowrap; 
 
    justify-content: center; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title></title> 
 
</head> 
 

 
<body> 
 
    <div style="padding: 7%;margin-top: 100px;"> 
 
    <h1>E<span>XTRATORRENT</span> A<span>UTOMATIC</span> D<span>OWNLOADER</span></h1> 
 
    <form class="flex"> 
 
     <input class="icon" name="search" placeholder="Search Torrent Name" type="text" /> <input class="btn btn-secondary" name="search" type="submit" value="Search" /> 
 
    </form> 
 
    </div> 
 
    <footer class="footer"> 
 
    <p>Provided without garanties by a <strong><a href="http://www.thefreedictionary.com/welldoer">Welldoer</a></strong>. A Script By <a href="http://stackoverflow.com/users/1203738/lars"><strong>Lars</strong></a></p> 
 
    </footer> 
 
</body> 
 

 
</html>

出典

2017-03-06 16:41:54 Lars

投稿リンクありがとうございました..！：D –

フォーム要素を1行にすることはできませんし、応答もありますか？

答えて

関連する問題