texto - poner dos botones en la misma linea html
Flexbox-Justifica a izquierda y derecha en la misma línea (4)
Aquí hay una forma más concisa de CSS de la solución de mmgross:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title></title>
<style type="text/css">
.container {
display:flex;
list-style-type:none;
padding:0;
}
.container > li:first-child {
margin-right:auto;
}
td { border:1px black solid } /* for debug */
</style>
</head>
<body>
<table>
<tr><td colspan=2>
<ul class="container">
<li>leftitem</li>
<li>rightitem</li>
</ul>
<tr><td>otherotherotherother<td>otherotherotherother
</table>
flexible:
Fiddle: https://jsfiddle.net/hbszf61x/ . Ignorar el rojo : esto se debe a un error de JSfiddle . El código es válido http://i.imgur.com/IVx6tET.png
Situación:
Tengo una barra de navegación simple que estoy construyendo en Flexbox. Quiero hacer flotar un elemento a la izquierda y mantener los demás pegados a la derecha.
Ejemplo:
<nav>
<ul class="primary-nav">
<li><a href="#" id="item1">ListItem1</a></li>
<li><a href="#" id="item2">ListItem2</a></li>
<li><a href="#" id="item3">ListItem3</a></li>
<li><a href="#" id="item4">ListItem4</a></li>
</ul>
</nav>
Problema
Por lo general, las respuestas involucran solo elementos flotantes a la izquierda y la derecha, pero supuestamente en Flexbox es malo usar Flotadores. Estaba pensando en usar justify-content y flex-start y flex-end pero eso no está funcionando muy bien.
Intenté aplicar flex-start en el primer elemento y luego flex-end en los otros, pero no funcionó tan bien.
Al igual que:
.primary-nav #item1 {
justify-content: flex-start;
}
.primary-nav #item2 {
justify-content: flex-end;
}
.primary-nav #item3 {
justify-content: flex-end;
}
.primary-nav #item4 {
justify-content: flex-end;
}
Elogie y agradezca a cualquiera que tenga habilidades de Flexbox y pueda ayudarme a mostrarme la manera correcta de manejar esta situación. :)
No hay necesidad de hacks de margen o pseudo-elementos.
Simplemente cree una división en su contenedor flexible y haga que el contenedor flexible se justifique por espacio entre ellos.
Dentro de la primera división, coloca los elementos que estarán a la izquierda, y dentro de la segunda división, coloca los elementos que estarán a la derecha.
nav.menu{
display: flex;
justify-content: space-between;
}
nav.menu ul{
margin: 0;
padding: 0;
list-style: none;
}
nav.menu ul li{
display: inline-block;
}
<nav class="menu">
<ul class="menu-left">
<li><a href="#">HOME</a></li>
<li><a href="#">SERVICES</a></li>
</ul>
<ul class="menu-right">
<li><a href="#">MEMBERS</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">PROFILE</a></li>
</ul>
</nav>
Puede insertar un pseudo-elemento en el lugar correcto y hacer que crezca para llenar el espacio disponible.
.primary-nav::after {
content: '''';
flex-grow: 1;
order: 0;
}
.right {
order: 1;
}
.primary-nav {
display: flex;
list-style-type: none;
padding: 0;
}
.primary-nav::after {
content: '''';
flex-grow: 1;
order: 0;
}
.right {
order: 1;
}
.left, .right {
border: 1px solid;
padding: 0 5px;
}
<ul class="primary-nav">
<li class="left">Left 1</li>
<li class="right">Right 1</li>
<li class="right">Right 2</li>
<li class="right">Right 3</li>
</ul>
<ul class="primary-nav">
<li class="left">Left 1</li>
<li class="left">Left 2</li>
<li class="right">Right 1</li>
<li class="right">Right 2</li>
</ul>
<ul class="primary-nav">
<li class="left">Left 1</li>
<li class="left">Left 2</li>
<li class="left">Left 3</li>
<li class="right">Right 1</li>
</ul>
<ul class="primary-nav">
<li class="left">Left 1</li>
<li class="right">Right 1</li>
<li class="left">Left 2</li>
<li class="right">Right 2</li>
<li class="left">Left 3</li>
<li class="right">Right 3</li>
</ul>
Si busca tener un solo elemento a la izquierda y todos los demás a la derecha, la solución más simple es usar justify-content:flex-end en el elemento primario para mover todos los elementos a la derecha y luego agregar el margin-right:auto al elemento que quieres tener a la izquierda
.primary-nav {
display:-webkit-flex;
display:flex;
list-style-type:none;
padding:0;
justify-content:flex-end;
}
.left {
margin-right:auto;
}
<nav>
<ul class="primary-nav">
<li class="left"><a href="#">ListItem1</a></li>
<li class="right"><a href="#">ListItem2</a></li>
<li class="right"><a href="#">ListItem3</a></li>
<li class="right"><a href="#">ListItem4</a></li>
</ul>
</nav>