Gleitendes Eingabeelement auf der rechten Seite

<!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>

Ich versuche, die Suchleiste nach rechts, aber in der gleichen Zeile wie die Überschrift zu positionieren. Ich habe versucht zu schweben, aber es funktioniert nicht. Die Suchleiste ist nach rechts verschoben, aber ich möchte sie nach oben schieben, um mit "Größere Überschrift" übereinzustimmen.Gleitendes Eingabeelement auf der rechten Seite

Quelle

2017-07-10 Arjun Monga

Ich habe versucht, den Header und die Suchleiste in einem größeren div setzen, und das schien zu funktionieren. Ich möchte wissen, ob ich es tun kann, ohne ein zusätzliches Wrapping div zu verwenden. –

können Sie erhalten, indem Sie display:inline-block

Css ändert

.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>

Sie es flex durch Verwendung auch

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 bekommen

display:table das gleiche zu tun.

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>

Quelle

2017-07-10 18:09:54 LKG

Das hat wunderbar funktioniert. –

Bitte upvote/accept die Antwort, wenn es funktioniert, so hilft die Antwort anderen Community-Mitgliedern. https://stackoverflow.com/help/someone-answers – LKG

Überprüfen Sie bitte folgenden Code.

<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>

Quelle

2017-07-10 18:11:03

Gleitendes Eingabeelement auf der rechten Seite

Antwort

Verwandte Themen