.list-group-item{
width: 165px;
height: 32px;
line-height: 1px;
text-align: center;
margin-bottom: 1px;
margin-top: 58px;
margin-left: 20px;
}
<ul class="list-group" v-if="showSearchHistory">
<li class="list-group-item" v-for="(item, index) in searchHistory.slice(-5).reverse().map(s => s.trim( ))"
:key="index"
@click="selectPreviousSearch(index)">{{ item }}</li>
</ul>
Tengo dos clases de arranque, a saber, "lista-grupo-elemento". y "grupo de lista". Entonces tengo una duda. Para las clases de arranque, hay algunos estilos previos que se agregarán automáticamente. Entonces en este caso
Quiero alinear todo el texto en una sola fila (uno al lado del otro), en lugar de uno por uno. (Desde el li, recibo texto cuando hago clic en el botón)
pantalla: bloque en línea para elementos li
- Robert
27 de marzo de 2021 a las 13:02
intenta agregar 'd-flex' en el grupo de listas si está usando bootstrap o usa display: flex en el grupo de listas
-DecPK
27/03/2021 a las 13:04
------------------------------------
ul.list-group{
display: table;
width: 100%;
text-align: center;
}
ul.list-group> li {
display: table-cell;
}
¿puedes utilizar esta opción?
2
Probé ccolgando pero sigue igual sin cambios
-T dhanunjay
27/03/2021 a las 13:54
Creo que es necesario apuntar a dos clases de arranque como list-group-item y list-group
-T dhanunjay
27/03/2021 a las 13:55
------------------------------------
Agregar estilo de lista: ninguno; a la lista y visualización: en línea o flotante: a la izquierda de cada uno de los elementos de la lista
Vea este ejemplo:
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menú
9
1
use inline-block en lugar de inline. float es una propiedad para imágenes flotantes únicamente dentro de un párrafo. No está destinado a fines de estilo. Fue mal utilizado como truco antes de 2012 con la introducción de HTML5 y flexbox, así como css-grid. Ahora, en 2021 (nueve años después), aún deberías usar flex.
- tacoshy
27/03/2021 a las 13:10
Por cierto. Ésa es la razón por la que w3schools tiene una reputación mixta. Enseña muchos trucos obsoletos en lugar de métodos de última generación.
- tacoshy
27/03/2021 a las 13:12
Bueno, podrías usar css flexbox o grid, que son los métodos más sencillos y los más utilizados en 2021. Pero no todos los motores de renderizado usan HTML5 (el motor de renderizado de correo electrónico de la aplicación de escritorio de Outlook no entiende HTML5). Por lo tanto, podría llamarlos heredados, pero harán el trabajo al ser compatibles con motores antiguos y si son responsables.La efectividad y las mejores prácticas no son preocupaciones
-EEAH
27/03/2021 a las 13:35
Entonces, si el propósito es crear una plantilla
-EEAH
27/03/2021 a las 13:37
Entonces no usarías CSS... ni una barra de navegación.
- tacoshy
27/03/2021 a las 13:39
