J'essaie d'aligner ma barre de recherche à côté de mon bouton déroulant. J'ai essayé d'aligner les alignements mais ça ne marche pas. Les deux boutons sont également situés dans un conteneur, par conséquent, la barre de recherche est de 100% de la largeur du conteneur. J'ai également essayé Align-Gauche, Align-Right and Alight-Center. J'ai également changé l'affichage du bouton sur "Flex".
Mes boutons actuels sont tels: - P>
p>
<!DOCTYPE html>
<html lang="en">
<head>
<title>sample</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/mystyle.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="js/app.js"></script>
<script src="js/restaurants.js"></script>
</head>
<body onload="getRestaurantData()">
<!-- This is where top navigation html codes is -->
<div w3-include-html="top-navigation.html"></div>
<!-- This is the container that holds the initial message, heading, and movies -->
<div class="container">
<!-- The message will be shown when the page loads and will
disappear after the movies are loaded -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select cuisine
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search this blog">
<div class="input-group-append">
<button class="btn btn-secondary" type="button">
<i class="fa fa-search"></i>
</button>
</div>
</div>
<br><br>
<!-- Displays thumbnails of the movies here -->
<div id="restaurantsTable" class="row"></div>
</div>
<br><br>
<!-- Include footer here -->
<div w3-include-html="footer.html"></div>
</body>
<script src="js/w3.js"></script>
<script>
//to bring in other HTML on the fly into this page
w3.includeHTML();
</script>
</html>3 Réponses :
.container {
display: flex
}
This will align dropdown and search bar side by side then you can give spacing according to your requirement.
IMHO PAS la meilleure idée de modifier les propriétés de la classe-cadre. Et aussi, vous devez faire plus d'ajustements pour obtenir une meilleure vue. Par exemple, après votre façon suggérée, nous devons faire face à un bouton de recherche étiré.
Si vous utilisez déjà Bootstrap, je suggère d'utiliser ses possibilités.
L'idée principale forte> est cet élément avec la propriété Dans votre cas, ajoutez la classe Le résultat est quelque chose comme ça. p> p> flex code>, doit entourer les articles Vous voulez travailler avec. p> d-flex code> à votre code>. Mais mieux faire diviser séparé avec cette classe, qui entoure dropdown code> et groupe d'entrée code>. Cela donnera plus de possibilités à manipuler. Ensuite, d'ajouter un peu d'espace après Dropdown code> Vous pouvez ajouter à cette div, par exemple, classe MR-2 code> qui ajoute la marge de droite. P>
<!DOCTYPE html>
<html lang="en">
<head>
<title>sample</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/mystyle.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="js/app.js"></script>
<script src="js/restaurants.js"></script>
</head>
<body onload="getRestaurantData()">
<!-- This is where top navigation html codes is -->
<div w3-include-html="top-navigation.html"></div>
<!-- This is the container that holds the initial message, heading, and movies -->
<div class="container">
<!-- The message will be shown when the page loads and will
disappear after the movies are loaded -->
<div class="d-flex">
<div class="dropdown mr-2">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select cuisine
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search this blog">
<div class="input-group-append">
<button class="btn btn-secondary" type="button">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
<br><br>
<!-- Displays thumbnails of the movies here -->
<div id="restaurantsTable" class="row"></div>
</div>
<br><br>
<!-- Include footer here -->
<div w3-include-html="footer.html"></div>
</body>
<script src="js/w3.js"></script>
<script>
//to bring in other HTML on the fly into this page
w3.includeHTML();
</script>
</html>
Les deux sont dans le même récipient, mais ne sont pas dans la même rangée