1

tengo una lista donde hay botones y quiero que todos tengan el mismo tamaño, y no se como.

introducir la descripción de la imagen aquí

aquí tengo el code donde tengo el div con el informe y el box con los botones:

<div class="col-lg-offset-2 col-8">
    <div class="row">
        <div class="col-xs-12">
            <div class="box box-primary">
                <div class="box-body">
                    <div style="display: inline-block;width: 100%;">
                        <div style="float:left">
                            <h2 class="box-title">Informes disponibles</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="box">
        <div class="box-body">
            <div class="informes">
                <ul class="treeview-menu">
                    @{ Html.RenderAction("ReportsMenuUser", "Home"); }
                </ul>
            </div>
        </div>
    </div>
</div>
4
  • 1
    Por favor edita tu pregunta y agrega el código en formato texto en lugar de usar screenshots. Así es más fácil depurar. Por otro lado, intenta darle un width de 25% a cada botón, quizás te funcione o quizás no, es difícil determinarlo sin tu código CSS.
    – DjCrazy
    el 16 ago. 2022 a las 23:37
  • perdón, lo hice sin pensar... e igual me sirvió mucho tu aporte, gracias.
    – Luis
    el 16 ago. 2022 a las 23:43
  • 1
    No es necesario que te disculpes. En su lugar edita la pregunta siguiendo las normas del sitio
    – DjCrazy
    el 17 ago. 2022 a las 0:25
  • 1
    No olvides aceptar la respuesta que te ha sido más útil, y tal como te han dicho, pulsa en editar tu pregunta para mejorarla. Subir código como imagen es mala idea, y no todos pueden verlas.
    – padaleiana
    el 17 ago. 2022 a las 18:32

1 respuesta 1

4

Puede que lo que busques sea min-width, minimo tendrán ese tamaño, pero si sobrepasa se hará más grande.

li {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: orange;
  min-width: 200px;
  text-align: center;
  margin: 5px;
}
<ul>
  <li>aaaaaaaaa</li>
  <li>aa</li>
  <li>a</li>
  <li>aaaaaa</li>
  <li>aaaaaaaaaaaa</li>
  <li>aaaaaa</li>
  <li>aaaaaaaa</li>
  <li>aaaa</li>
  <li>aaaaaa</li>
</ul>

Si lo que quieres es que se corte el texto y pase abajo tendrás que darle in ancho width fijo como en este ejemplo:

li {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: orange;
  width: 200px;
  text-align: center;
  margin: 5px;
}
<ul>
  <li>aaaaaaaaa</li>
  <li>aa</li>
  <li>a</li>
  <li>aaaaaa</li>
  <li>aaaaaaaaa aaaa aaaa aaaaa aaaa aaaaa aaaaaa aaaaaaa</li>
  <li>aaaaaa</li>
  <li>aaaaaaaa</li>
  <li>aaaa</li>
  <li>aaaaaa</li>
</ul>

1
  • Gracias, me ayudo más con su comentario.
    – Luis
    el 17 ago. 2022 a las 18:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.