検索バーを大きくするにはどうすればよいですか？

これはこれまでのコードで、検索バーをナビゲーションバーに合わせる方法を知りたいと思います。助けてください、申し訳ありません、私は本当にコーディングがうまくいかず、これは私が取っている情報技術のクラスです。検索バーを大きくするにはどうすればよいですか？

<!DOCTYPE html> 
<html> 
<head> 
<style> 
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #8A1414; 
} 

li { 
    float: left; 
} 

li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 30px; 
    text-decoration: none; 
} 

li a:hover { 
    background-color: #111; 
} 

</style> 
</head> 
<body> 

<ul> 
    <li><a class="active" href="#home">Home</a></li> 
    <li><a href="#news">Movies</a></li> 
    <li><a href="#contact">TV</a></li> 
    <li><a href="#about">About</a></li> 
    <input id="search-bar" name="search" type="text" placeholder="Search..."> 
    <input id="search-button" name="search_submit" type="submit" value="Search"> 
</ul> 
</body>

出典

2016-05-09 Selina Delgado

お客様のHTMLは無効です。あなたは 'ul'の子として' li'しか持てません。 **あなたのコードを検証してください！** –

あなたのCSSコードでこれを入れて欲しいものです。この：？

input#search-bar { 
margin-top: 10px; 
}

出典

2016-05-09 15:50:06

あなたのHTMLは無効です。あなたは子どもとしてliを持つことができますul

だから、いくつか変更する必要があります。

私のようなものをお勧めしたい：私たちは、彼らが所属していないulのうち、検索入力を取る

を。それらを自分のdivにラップして、それを右側にフロートします。

nav要素にロット全体（ulと検索div）をラップします。

の入力をdisplay:inline-blockに設定し、希望の幅を適用します。

Codepen Demo

nav { 
 
    background-color: #8A1414; 
 
    overflow: hidden; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    float: left; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 30px; 
 
    text-decoration: none; 
 
} 
 
li a:hover { 
 
    background-color: #111; 
 
} 
 
.search { 
 
    float: right; 
 
    padding: 14px 0; 
 
} 
 
.search #search-bar { 
 
    display: inline-block; 
 
    width: 100px; 
 
    /* your width here */ 
 
    /* 100px for SO Snippet only */ 
 
}

<nav> 
 
    <ul> 
 
    <li><a class="active" href="#home">Home</a> 
 
    </li> 
 
    <li><a href="#news">Movies</a> 
 
    </li> 
 
    <li><a href="#contact">TV</a> 
 
    </li> 
 
    <li><a href="#about">About</a> 
 
    </li> 
 

 
    </ul> 
 
    <div class="search"> 
 
    <input id="search-bar" name="search" type="text" placeholder="Search..."> 
 
    <input id="search-button" name="search_submit" type="submit" value="Search"> 
 
    </div> 
 
</nav>

出典

2016-05-09 15:55:00

あなたはCSS /スタイルタグに

#search-bar{ width: 300px }

これを入れて幅を大きく設定したい場合はあなたのpreferanceに応じて値を微調整することができます。

レイアウトで検索バーを適切に調整したい場合は、次のプロパティを提案し、その値を調整することもできます。

#search-bar{ 
      width: 300px; 
      height: 20px; 
      margin-top: 10px; 
      margin-left: 600px; 
      }

CSSとHTMLをよりよく理解するためには、w3cの学校のウェブサイトをご覧ください。

出典

2016-05-09 15:59:22 Rusty

浮動小数点数を使用することもできますが、それはあなたの理解度によります。 – Rusty

検索バーを大きくするにはどうすればよいですか？

答えて

関連する問題