右に浮動入力要素

<!doctype html> 
    <html> 

    <head> 
    <style type="text/css"> 
    body { 
     margin-left: 0; 
     margin-top: 0; 
    } 
    .header { 
     background: #009FC7; 
     margin-left: 0px; 
     color: white; 


    } 
    .header a { 
     color: white; 
    } 
    .header h1 { 
     margin: 0 0 0 15px; 
     font-size: 50px; 

    } 
    .header h3 { 
     margin: 0 0 0 15px; 
    } 
    .header a { 
     text-decoration: none; 
    } 
    .search { 
     float: right; 
    } 


    </style> 

    <meta charset="utf-8"/> 
    <title>Title here</title> 

    </head> 

    <body> 
    <div class="header"> 
    <h1> 
     <a href="#">Larger heading</a> 
    </h1> 
    <h3>Smaller heading</h3> 
    </div> 
    <div class="search"> 
     <input value="Google" name="gsearch" id="gsearch"> 
     <input type="submit" value="Search" name="gsearch" id="gsearch"> 
    </div> 


    </body> 



    </html>

私は検索バーを右に、ヘッダーと同じ行に配置しようとしています。私は浮動しようとしましたが、動作していません。検索バーは右側に浮かんでいますが、私はそれを "大きな見出し"に沿って押し上げたいと思います。右に浮動入力要素

出典

2017-07-10 Arjun Monga

私は大きなdivの内側にヘッダーと検索バーを入れてみました、それが動作するように見えました。私は余分なラッピングdivを使わずにそれができるかどうかを知りたい。 –

あなたはdisplay:inline-block

にCSSを使用して取得することができますあなたはまた、

body { 
 
    margin-left: 0; 
 
    margin-top: 0; 
 
} 
 

 
.header { 
 
    background: #009FC7; 
 
    margin-left: 0px; 
 
    color: white; 
 
} 
 

 
.header a { 
 
    color: white; 
 
} 
 

 
.header h1 { 
 
    margin: 0 0 0 15px; 
 
    font-size: 50px; 
 
} 
 

 
.header h3 { 
 
    margin: 0 0 0 15px; 
 
} 
 

 
.header a { 
 
    text-decoration: none; 
 
} 
 

 
/*Added Css Part*/ 
 

 
.search { 
 
    flex: 1 0 0; 
 
    text-align: right; 
 
} 
 

 
.box { 
 
    display: flex; 
 
    align-items: center; 
 
}

<div class="header"> 
 
    <div class="box">  <!-- Added div --> 
 
    <h1> 
 
     <a href="#">Larger heading</a> 
 
    </h1> 
 
    <div class="search"> 
 
     <input value="Google" name="gsearch" id="gsearch"> 
 
     <input type="submit" value="Search" name="gsearch" id="gsearch"> 
 
    </div> 
 
    </div> 
 
    <h3>Smaller heading</h3> 
 
</div>

0を flexを使用してそれを得ることができ

.header h1 { 
    margin: 0 0 0 15px; 
    font-size: 50px; 
    display: inline-block; /*Added*/ 
} 
.search { 
    float: right; 
    margin-top: 20px;  /*Added*/ 
}

body { 
 
    margin-left: 0; 
 
    margin-top: 0; 
 
} 
 

 
.header { 
 
    background: #009FC7; 
 
    margin-left: 0px; 
 
    color: white; 
 
} 
 

 
.header a { 
 
    color: white; 
 
} 
 

 
.header h1 { 
 
    margin: 0 0 0 15px; 
 
    font-size: 50px; 
 
    display: inline-block; 
 
} 
 

 
.header h3 { 
 
    margin: 0 0 0 15px; 
 
} 
 

 
.header a { 
 
    text-decoration: none; 
 
} 
 

 
.search { 
 
    float: right; 
 
    margin-top: 20px; 
 
}

<div class="header"> 
 
    <h1> 
 
    <a href="#">Larger heading</a> 
 
</h1> 
 
    <div class="search"> 
 
<input value="Google" name="gsearch" id="gsearch"> 
 
<input type="submit" value="Search" name="gsearch" id="gsearch"> 
 
    </div> 
 
    <h3>Smaller heading</h3> 
 
</div>

変更します同じことをやって

display:table。

body { 
 
    margin-left: 0; 
 
    margin-top: 0; 
 
} 
 

 
.header { 
 
    background: #009FC7; 
 
    margin-left: 0px; 
 
    color: white; 
 
} 
 

 
.header a { 
 
    color: white; 
 
} 
 

 
.header h1 { 
 
    margin: 0 0 0 15px; 
 
    font-size: 50px; 
 
    display: table-cell; /*Added*/ 
 
} 
 

 
.header h3 { 
 
    margin: 0 0 0 15px; 
 
} 
 

 
.header a { 
 
    text-decoration: none; 
 
} 
 

 
.search { 
 
    display: table-cell; /*Added*/ 
 
    text-align: right; /*Added*/ 
 
    vertical-align: middle; /*Added*/ 
 
} 
 

 
.box { 
 
    display: table; /*Added*/ 
 
    width: 100%; /*Added*/ 
 
}

<div class="header"> 
 
    <div class="box">  <!-- Added div --> 
 
    <h1> 
 
     <a href="#">Larger heading</a> 
 
    </h1> 
 
    <div class="search"> 
 
     <input value="Google" name="gsearch" id="gsearch"> 
 
     <input type="submit" value="Search" name="gsearch" id="gsearch"> 
 
    </div> 
 
    </div> 
 
    <h3>Smaller heading</h3> 
 
</div>

出典

2017-07-10 18:09:54 LKG

それは素晴らしく働いた。 –

答えがうまくいけば回答を受け取り、他のコミュニティのメンバーに役立つはずです。 https://stackoverflow.com/help/someone-answers – LKG

次のコードを確認してください。

<head> 
<style type="text/css"> 
body { 
    margin-left: 0; 
    margin-top: 0; 
} 
.header { 
    background: #009FC7; 
    margin-left: 0px; 
    color: white; 


} 
.header a { 
    color: white; 
} 
.header h1 { 
    margin: 0 0 0 15px; 
    font-size: 50px; 
    float:left; width:70%; 
} 
.header h3 { 
    margin: 0 0 0 15px; 
} 
.header a { 
    text-decoration: none; 
} 
.search { 
    float: right; 
    margin-top:15px; 
    margin-right:15px; 
} 
.clear { 
    clear: both; 
} 
</style> 

<meta charset="utf-8"/> 
<title>Title here</title> 

</head> 

<body> 
<div class="header"> 
<h1> 
    <a href="#">Larger heading</a> 
</h1> 
<div class="search"> 
     <input value="Google" name="gsearch" id="gsearch"> 
     <input type="submit" value="Search" name="gsearch" id="gsearch"> 
    </div> 
    <div class="clear"></div> 
<h3>Smaller heading</h3> 

</div> 


</body> 



</html>

出典

2017-07-10 18:11:03

答えて

関連する問題