お世話になります。
WordPressのウィジェットで「検索フォーム」を作成しています。
テキスト入力フォームの横に「検索ボタン」を表示させたいのですが、
ブラウザの幅を狭めると、ボタンが下に落ちてしまいます。
いろいろCSSを調整してみましたが、ずっと固定させることは難しいでしょうか?
よろしくお願い致します。
HTML
1<div class="column column-34"> 2<li id="categories-5" class="widget widget_categories"><h2 class="widgettitle">カテゴリー</h2> 3 <ul> 4 <li class="cat-item cat-item-3"><a href="http://localhost:8888/wordpress/category/%e3%83%86%e3%82%b9%e3%83%88%e3%82%ab%e3%83%86%e3%82%b4%e3%83%aa/">テストカテゴリ</a> 5</li> 6<li class="cat-item cat-item-1"><a href="http://localhost:8888/wordpress/category/%e6%9c%aa%e5%88%86%e9%a1%9e/">未分類</a> 7</li> 8 </ul> 9 </li> 10 <li id="recent-posts-6" class="widget widget_recent_entries"> 11 <h2 class="widgettitle">最近の投稿</h2> 12 <ul> 13 <li> 14 <a href="http://localhost:8888/wordpress/2018/09/26/%e6%8a%95%e7%a8%bf%e3%81%ae%e3%83%86%e3%82%b9%e3%83%88%ef%bc%92/">投稿のテスト2</a> 15 </li> 16 <li> 17 <a href="http://localhost:8888/wordpress/2018/09/26/%e6%8a%95%e7%a8%bf%e3%81%ae%e3%83%86%e3%82%b9%e3%83%88/">投稿のテスト</a> 18 </li> 19 <li> 20 <a href="http://localhost:8888/wordpress/2018/09/26/test2/">test2</a> 21 </li> 22 <li> 23 <a href="http://localhost:8888/wordpress/2018/09/26/test/">test</a> 24 </li> 25 <li> 26 <a href="http://localhost:8888/wordpress/2018/07/10/hello-world/">Hello world!</a> 27 </li> 28 </ul> 29 </li> 30<li id="search-7" class="widget widget_search"><form role="search" method="get" id="searchform" class="searchform" action="http://localhost:8888/wordpress/"> 31 <div> 32 <label class="screen-reader-text" for="s">検索:</label> 33 <input type="text" value="" name="s" id="s"> 34 <input type="submit" id="searchsubmit" value="検索"> 35 </div> 36 </form></li> 37 </div>
CSS
1/* 検索フォーム 2-------------------------------------------------*/ 3#s { 4 -webkit-appearance: none; 5 display: inline-block; 6 margin-right: 0; 7 margin-bottom: 20px; 8 padding: 10px; 9 width: 200px; 10 height: 40px; 11 box-sizing: border-box; 12 border: 1px solid #ccc; 13} 14#searchsubmit { 15 -webkit-appearance: none; 16 display: inline-block; 17 padding: 0 10px; 18 color: #fff; 19 width: 80px; 20 height: 40px; 21 vertical-align: top; 22 border: none; 23}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/26 06:13