CSSを使用して検索ボックスを左端に移動するにはどうすればよいですか？

私はHTMLとCSSを学んでいます。検索ボタンを検索ボタンとともに左端に移動するには、どうすればよいか知りたい。私はホーム、プロフィール、設定を右に動かすことは望ましくありません。CSSを使用して検索ボックスを左端に移動するにはどうすればよいですか？

以下はコードです。事前に感謝します。あなたは、スタイルプロパティを含む逃し

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>My first css program</title> 
 

 
<style> 
 

 
nav{ 
 
text-align:right; 
 
list-style:none; 
 
border:none; 
 
border-color:white; 
 
background-color:none; 
 
padding:none; 
 
margin:none; 
 
} 
 

 
li{ 
 
color:green; 
 
background-color:pink; 
 
padding-top:10px; 
 
padding-bottom:10px; 
 
padding-right:10px; 
 
} 
 

 
</style> 
 

 
</head> 
 

 
<body> 
 
<nav> 
 
<li> 
 

 
<input type="text" name="search"> 
 
<input type="submit" name="search" value="search" padding-left:none> 
 

 
<a href="www.az.com">Home |</a> 
 
<a href="www.az.com/profile">Profile |</a> 
 
<a href="www.az.com/settings">Settings</a> 
 
</li> 
 
</nav> 
 
</body> 
 
</html>

出典

2017-08-13 Akash kumar

まず：ul親wihtout li要素を使用しないでください。これらすべての要素をまとめてulとし、それを別々のliに入れます。そして、あなたは残りの部分が右に移動させながら、それは、左整列するために最初liにulとmargin-right: auto;からdisplay: flexを割り当てることができます。

nav { 
 
    text-align: right; 
 
    list-style: none; 
 
    border: none; 
 
    border-color: white; 
 
    background-color: none; 
 
    padding: none; 
 
    margin: none; 
 
} 
 

 
.x { 
 
    list-style: none; 
 
    color: green; 
 
    background-color: pink; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    padding-right: 10px; 
 
    display: flex; 
 
} 
 
.x li { 
 
margin-right: 1em; 
 
} 
 
.x li:first-child { 
 
    margin-right: auto; 
 
}

<nav> 
 
    <ul class="x"> 
 
    <li> 
 
     <input type="text" name="search"> 
 
     <input type="submit" name="search" value="search" padding-left:none> 
 
    </li> 
 
    <li> 
 
     <a href="www.az.com">Home |</a> 
 
    </li> 
 
    <li> 
 
     <a href="www.az.com/profile">Profile |</a> 
 
    </li> 
 
    <li> 
 
     <a href="www.az.com/settings">Settings</a> 
 
    </li> 
 
    </ul> 
 
</nav>

出典

2017-08-13 16:01:05 Johannes

。

<input type="text" name="search" style="padding-left:none"> 
<input type="submit" name="search" value="search" style="padding-left:none">

ORこの方法：

<input type="text" name="search" style="float:left;"> 
<input type="submit" name="search" value="search" style="float:left;">

出典

2017-08-13 15:55:23 Jixone

おかげで、それが動作していません –

これはあなたを助けるかもしれません。左に浮動小数点を使用して左に移動します。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>My first css program</title> 
 

 
<style> 
 

 
nav{ 
 
text-align:right; 
 
list-style:none; 
 
border:none; 
 
border-color:white; 
 
background-color:none; 
 
padding:none; 
 
margin:none; 
 
} 
 

 
li{ 
 
color:green; 
 
background-color:pink; 
 
padding-top:10px; 
 
padding-bottom:10px; 
 
padding-right:10px; 
 
} 
 
.left{ 
 
float:left; 
 
} 
 
</style> 
 

 
</head> 
 

 
<body> 
 
<nav> 
 
<li> 
 
<div class="left"> 
 
<input type="text" name="search"> 
 
<input type="submit" name="search" value="search" > 
 
</div> 
 
<a href="www.az.com">Home |</a> 
 
<a href="www.az.com/profile">Profile |</a> 
 
<a href="www.az.com/settings">Settings</a> 
 
</li> 
 
</nav> 
 
</body> 
 
</html>

出典

2017-08-13 15:56:37

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>My first css program</title> 
 

 
<style> 
 

 
nav{ 
 
text-align:right; 
 
list-style:none; 
 
border:none; 
 
border-color:white; 
 
background-color:none; 
 
padding:none; 
 
margin:none; 
 
} 
 

 
li{ 
 
color:green; 
 
background-color:pink; 
 
padding-top:10px; 
 
padding-bottom:10px; 
 
padding-right:10px; 
 
} 
 

 
</style> 
 

 
</head> 
 

 
<body> 
 
<nav> 
 
<li> 
 

 
<input type="text" name="search" style="float:left"> 
 
<input type="submit" name="search" value="search" style="float:left"> 
 

 
<a href="www.az.com">Home |</a> 
 
<a href="www.az.com/profile">Profile |</a> 
 
<a href="www.az.com/settings">Settings</a> 
 
</li> 
 
</nav> 
 
</body> 
 
</html>

出典

2017-08-13 15:57:46 zynkn

CSSを使用して検索ボックスを左端に移動するにはどうすればよいですか？

答えて

関連する問題