2

Esta Imagen:

introducir la descripción de la imagen aquí

Es de una lista que estoy haciendo pero quiero que quede asíintroducir la descripción de la imagen aquí Y este es mi codigo CSS y HTML:

ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
li{ /* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 1px 12px;
padding:4px 5px;
}
ul li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
left: -30px;
top: 50%;
margin-top: -13px;
background: #8E8E8E; /* background color of the numbers */
height: 1.9em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
color: #fff;
font-size: 14px;
}
ul li:after{
position: absolute;
content: '';
left: -2px;
margin-top: -.7em; 
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:10px solid #8E8E8E; /* background color of the right arrow*/
}
ul li a{
color: #444;
text-decoration: none;   
font-size:15px;
}
ul li {
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 0.4em;
background: #ddd;
transition: all .3s ease-out;
text-decoration:none;
transition: all .1s ease-in-out;
}
ul li:hover{
background: #eee; /* Background color on mouseover */
}   
ul li a:hover{
color:#444; /* Link color on mouseover */
margin-left:3px;
}
<div id="demo-frame">
<ul id="lista1" class="gallery">
	<li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
</ul>
<ul id="lista2">
	<li>Item5</li>
    <li>Item6</li>
    <li>Item7</li>
</ul>
</div>

¿Alguien que me pueda ayudar?

7
  • 1
    Te sugiero incluir también tu HTML, saludos Commented el 3 ago. 2017 a las 21:46
  • 1
    @ReinosRic deberias incluir el codigo HTML + codigo funcional Commented el 3 ago. 2017 a las 21:46
  • 1
    puedes usar flex, algo asi: ul{ display:flex; } Commented el 3 ago. 2017 a las 21:50
  • 1
    como ya te han sugerido, sin el html no podemos ayudarte
    – Rene Limon
    Commented el 3 ago. 2017 a las 21:59
  • 1
    ¿Lo que quieres es que simplemente se acomode una al lado de la otra? Commented el 3 ago. 2017 a las 22:36

3 respuestas 3

2

Puedes usar la propiedad flex que sugirió @Elberth, nada más habría que agregar este pedazo de código:

#demo-frame{
    display: flex;
    width: 50%;  //Sólo para acortarlo
}

/*Flexbox*/
#demo-frame{
	display: flex;
	width: 50%;	
}	
  
  ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
li{ /* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 1px 12px;
padding:4px 5px;
}
ul li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
left: -30px;
top: 50%;
margin-top: -13px;
background: #8E8E8E; /* background color of the numbers */
height: 1.9em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
color: #fff;
font-size: 14px;
}
ul li:after{
position: absolute;
content: '';
left: -2px;
margin-top: -.7em; 
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:10px solid #8E8E8E; /* background color of the right arrow*/
}
ul li a{
color: #444;
text-decoration: none;   
font-size:15px;
}
ul li {
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 0.4em;
background: #ddd;
transition: all .3s ease-out;
text-decoration:none;
transition: all .1s ease-in-out;
}
ul li:hover{
background: #eee; /* Background color on mouseover */
}   
ul li a:hover{
color:#444; /* Link color on mouseover */
margin-left:3px;
}
<div id="demo-frame">
	<ul id="lista1" class="gallery">
		<li>Item1</li>
	    <li>Item2</li>
	    <li>Item3</li>
	    <li>Item4</li>
	</ul>
	<ul id="lista2">
		<li>Item5</li>
	    <li>Item6</li>
	    <li>Item7</li>
	</ul>
</div>

1

Una alternativa es wrappear ambos listados en divs con display:inline-block.

De esta manera ambos listados se van a colocar en la misma linea.

CSS - Inline-block

Luego puedes asignarle vertical-align:top; a ambas divs para que los listados esten alineados desde el primer elemento.

ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
li{ /* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 1px 12px;
padding:4px 5px;
}
ul li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
left: -30px;
top: 50%;
margin-top: -13px;
background: #8E8E8E; /* background color of the numbers */
height: 1.9em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
color: #fff;
font-size: 14px;
}
ul li:after{
position: absolute;
content: '';
left: -2px;
margin-top: -.7em; 
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:10px solid #8E8E8E; /* background color of the right arrow*/
}
ul li a{
color: #444;
text-decoration: none;   
font-size:15px;
}
ul li {
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 0.4em;
background: #ddd;
transition: all .3s ease-out;
text-decoration:none;
transition: all .1s ease-in-out;
}
ul li:hover{
background: #eee; /* Background color on mouseover */
}   
ul li a:hover{
color:#444; /* Link color on mouseover */
margin-left:3px;
}

.inline-block-div{
  display:inline-block;
  padding: 15px;
  vertical-align:top;
}
<div id="demo-frame">
  <div class="inline-block-div">
    <ul id="lista1" class="gallery">
      <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
        <li>Item4</li>
    </ul>
  </div>
  <div class="inline-block-div">
      <ul id="lista2">
        <li>Item5</li>
          <li>Item6</li>
          <li>Item7</li>
      </ul>
   </div>
</div>

0

Hola a todos: resulta que el problema radicaba en el "width" ya que lo que ponía como porcentaje (%) realmente lo quería como px.

Gracias

Tu Respuesta

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

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