¿Cómo puedo hacer que múltiples elementos se alineen entre sí en la parte superior usando HTML y CSS?
Estoy teniendo algunos problemas para alinear varios elementos diferentes. Tengo una barra de búsqueda, un cuadro desplegable, mi logotipo y 4 botones de navegación y quiero que mi logotipo esté en la parte superior izquierda, seguido del cuadro desplegable y los 4 botones de navegación para que parezca que hay 5 botones de navegación con 1 siendo un cuadro desplegable, y luego seguido por mi barra de búsqueda (que haré para que cuando vayas a escribir en ella, el resto de la cinta en la parte superior desaparezca para que sea una gran barra de búsqueda dejando solo el logotipo, la barra de búsqueda y el botón de contacto que estará en la parte superior derecha.
Esto es lo que parece hasta ahora: https://i.stack.imgur.com/LJEEl.png
@charset “utf-8”;
/* CSS Document */
.dropbtn {
background-color: #D11C1F;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #5E5A5A;
}
form {
background-color: #4654e1;
width: 300px;
height: 44px;
border-radius: 5px;
display: flex;
flex-direction: row;
align-items: center;
}
input {
all: unset;
font: 16px system-ui;
color: #fff;
height: 100%;
width: 100%;
padding: 6px 10px;
}
::placeholder {
color: #fff;
opacity: 0.7;
}
button {
all: unset;
cursor: pointer;
width: 44px;
height: 44px;
}
svg {
color: #fff;
fill: currentColor;
width: 24px;
height: 24px;
padding: 10px;
}
.searchbar {
display: inline-block;
float: right;
}
body {
margin: 0;
padding: 0;
font-size: 15px;
}
/* Navigation */
nav {
float: left;
margin: 0;
overflow: hidden;
text-align: center;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
list-style-type: none;
}
nav>ul>li>a {
color: #aaa;
display: block;
line-height: 2em;
padding: 0.5em 1em;
text-decoration: none;
}
.logo-img {
float: left;
position: relative;
margin: 10px 15px 15px 10px;
}
.bg-div {
background: white;
overflow: hidden;
}
davy.ai
Para lograr la alineación deseada de los elementos, puedes intentar los siguientes pasos:
Establece la propiedad de visualización del elemento nav-bar en “flex” y la propiedad de alinear elementos en “center” para alinear horizontalmente los elementos.
Establece la propiedad de orden del elemento desplegable en “1” para moverlo a la segunda posición en nav-bar.
Añade un elemento espaciador entre los botones de navegación y la barra de búsqueda, y establece su propiedad de flexibilidad en “1” para que se expanda y llene el espacio restante.
Envuelve la barra de búsqueda y el botón de “Contáctanos” en otro elemento div y dale un nombre de clase (por ejemplo, “search-container”).
Establece la propiedad de visualización del elemento search-container en “flex” y la propiedad de justificar contenido en “flex-end” para alinear los elementos a la derecha.
Añade una propiedad de margen izquierdo al elemento search-container para crear un espacio entre los botones de navegación y la barra de búsqueda.
Aquí hay un ejemplo de código HTML y CSS modificado:
Empleados
Preguntas frecuentes
Resumen
Contáctanos
Y aquí está el código CSS:
.nav-bar {
display: flex;
align-items: center;
}
.search-container {
display: flex;
justify-content: flex-end;
align-items: center;
}
nav {
margin-right: auto;
}
nav ul li {
margin-right: 20px;
}
.spacer {
flex: 1;
}
Puede que necesites ajustar los valores de las propiedades de margen y de relleno para lograr la separación y la alineación exactas que deseas.