¿Cómo solucionar errores en los enlaces?

Question

Cómo puedo evitar que sobre salga y se encime sobre otros enlace cuando existe un titulo de enlace demasiado largo y conservar la distancia de los enlace de Vista previa y el tiempo 02:20 del audio & video sin importar que tan corto o extenso sea el enlace.

Lo que deseo lograr.

Al adaptar a dispositivos móviles / responsive cómo hacer respectar sus espacios del contenido de los enlaces sin que se encime uno tras otro evitar que se desordene los enlaces, de igual manera conservar la distancia de Vista previa y el tiempo 02:20 del audio & video sin importar que tan corto o extenso sea el enlace.

Lo que deseo lograr.

ACTUALIZACIÓN comentario de Diego Martin

El problema se mostrara a simple vista desde que se ejecuta mi código se puede observar que en pantalla completa del navegador con enlaces demasiados largo sobresale de lo deseado de las imágenes en este caso lo ideal sería que se acoplara como la primera imagen, ahora cambiando de tamaño (responsive) del navegador ninguno de los enlaces estructurados respecta sus espacio lo ideal sería que se acoplara como la segunda imagen.

Mi código de diseño sobre lista de enlaces de audio & video

.views {
  width: 100%;
  border-top: none;
  background-color: white;
  border-left: 1px solid rgb(230, 230, 230);
  border-right: 1px solid rgb(230, 230, 230);
  border-bottom: 1px solid rgb(230, 230, 230);
}

.views .view-links {
  list-style-type: none;
  margin: 0;
  padding: 0 0px;
  font-size: .99em;
}

.views .view-links li {
  padding: 9px 20px 9px 20px;
  border-top: 1px solid rgb(230, 230, 230);
}

.views .view-links li div {
  display: inline;
}

.views .view-links li div a {
  text-decoration: none;
  display: block;
}

.view-preview {
  color: #000;
  float: right;
  left: -160px;
  position: relative;
  top: -16px;
}

.length {
  color: #000;
  float: right;
  position: relative;
  top: -16px;
  /*-ms-transform: translateY(-90%);
  -webkit-transform: translateY(-90%);
  transform: translateY(-90%);*/
}

<div class="views">
  <ul class="view-links">
    <li>
      <div>
        <a href="#"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"> audio video audio video audio video
          <div class="view-preview">&nbsp;Vista Previa</div>
          <div class="length">&nbsp;02:34</div>
        </a>
      </div>
    </li>
    <li>
      <div>
        <a href="#"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"> audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video
          audio video audio video audio video audio video audio video audio video audio video audio video audio video
          <div class="view-preview">&nbsp;Vista Previa</div>
          <div class="length">&nbsp;02:34</div>
        </a>
      </div>
    </li>
    <li>
      <div>
        <a href="#"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"> audio video audio video audio video
          <div class="length">&nbsp;02:34</div>
        </a>
      </div>
    </li>
  </ul>
</div>

No acabo de entender muy bien cual es tu problema, que se te crean varias filas cuando haces responsive y no quieres que te pase? — Diego Martin, Jul 27 '17 at 20:07
@DiegoMartin No entiendo amigo que no entiendes, se basa a las dos cosas a lo normal y a responsive ejecuta mi código y puedes observar como tengo el segundo enlace con un texto demasiado largo se encima uno tras otro y sobre sale de su contenedor y al responsive es mucho más peor. — J. Mick, Jul 27 '17 at 20:15
Yo no entiendo lo del hover, quieres que al pasar el mouse sobre el li cambie de color el background ?? — Benjamín Guzmán, Jul 28 '17 at 00:31
Pues no lo entiendo porque para empezar tienes dos "Lo que deseo lograr" y cada uno tiene una imagen distinta (parecidas, pero distintas) y luego dices que si el link es muy largo sobresale, pero sobre sale por donde, a lo ancho, a lo largo, se sale de su contenedor,... una imagen del problema estaría bien, para hacernos una idea, al menos yo. — Diego Martin, Jul 28 '17 at 06:21
@DiegoMartin No entiendo que no esta claro amigo, los errores se puede observar a simple vista ejecutando mi código, realiza prueba ejecútalo da en la opción pantalla completa, y puedes observar que cuando existe un enlace con un titulo o texto demasiado largo este sobre sale de su contenido y sobre encima el resto de enlace, igualmente sucede con el responsive cambia el tamaña del navegador y puedes observar cómo sobre sale igual y no respecta los espacios de cada enlace del mismo. — J. Mick, Jul 31 '17 at 04:40
El principal problema que veo es que estás incluyendo toda la información dentro del mismo enlace. ¿Realmente es necesario que todo sea parte del enlace?, ¿No puedes separar vista previa y duración?, así sería más fácil tratar de posicionar los 3 elementos como deseas, tal vez usando la propiedad flex y te olvidas de problemas. — Triby, Jul 31 '17 at 17:19
@Mick te sirve la alternativa `onclick` en el elemento padre ?? — Benjamín Guzmán, Jul 31 '17 at 18:14
@Triby Realmente no, porque sería igual el mismo enlace enlazado con el mismo vídeo o audio, hacerlo por separado significaría 3 enlaces no creo conveniente pero si funciona como lo estoy planteando entonces puedes mostrarme un ejemplo a la idea que tienes en mente. — J. Mick, Jul 31 '17 at 18:53

Risa__B · Accepted Answer · 2017-07-31T18:25:03.600

11

Despues de ver tu pregunta y explorar las distintas respuestas y lo que querias, llegue a la conclusion de que esto querias :

.views {
  width: 100%;
  background-color: white;
  border: 1px solid rgb(230, 230, 230);
}

.view-links {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: .99em;
}

.view-links li {
  padding: .5% 1%;
  border: 1px solid rgb(230, 230, 230);
}

 .row{
  text-decoration: none;
  display: flex;
  align-items:center;
  justify-content:space-between;
}

.play{ 
width:7%;
align-self:center;
}

.text {
width:60%;
}

.view-preview,.length {
 color: #000;
  text-align:center;
}

.view-preview{
width:23%;
}

.length {
width:10%;
}

<div class="views">
  <ul class="view-links">
<li>
  <div>
    <a class="row" href="#">
    <div class="play">
      <img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"> </div>
      <div class="text"> audio video audio video audio video </div>
      <div class="view-preview">Vista Previa</div>
      <div class="length">02:34</div>
    </a>
  </div>
</li>
<li>
  <div>
    <a class="row" href="#">
    <div class="play">
      <img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"> </div>
      <div class="text"> audio video audio video audio video  audio video audio video audio video  audio video audio video
        audio video  audio video audio video audio video audio video audio video audio video audio video 
        audio video audio video audio video audio video audio video audio video audio video </div>
      <div class="view-preview">Vista Previa</div>
      <div class="length">02:34</div>
    </a>
  </div>
</li>
<li>
  <div>
    <a class="row" href="#">
    <div class="play">
      <img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"> </div>
      <div class="text">audio video audio video audio video </div>
      <div class="view-preview">Vista Previa</div>
      <div class="length">02:34</div>
    </a>
  </div>
</li>
  </ul>
</div>

edited Jul 31 '17 at 18:25

answered Jul 31 '17 at 16:11

Risa__B

495
3
6

Es perfecto pero existe un pequeño detalle, no quiero que se oculte los enlace largo o extenso. – J. Mick Jul 31 '17 at 17:09
como se puede observar en la primer imagen con enlaces largo y enlace corto. – J. Mick Jul 31 '17 at 17:19
Pues le quitare el height y el overflow a los estilos, esperame un momento qe se me daño el monitor, intenta ahora, no puedo saber como queda porque lo edite desde el celular – Risa__B Jul 31 '17 at 18:23
Es perfecto lo has logrado. – J. Mick Jul 31 '17 at 18:47
Ok, gracias pana – Risa__B Jul 31 '17 at 18:57
Y mi +50 de stackoverflow? – Risa__B Jul 31 '17 at 23:25
+1 por utilizar flexbox (la herramienta actual para layouts unidimensionales) y por NO utilizar tablas. Las tablas son para tabular, no para generar layouts. – Shaz Aug 01 '17 at 03:11
Gracias por el +1 @Shaz – Risa__B Aug 01 '17 at 03:45
@Risa__B obtienes la recompensa cuando halla terminado la fecha de la pregunta(dentro de 6 días) y tu respuesta este marcada como la correcta o contenga la mayor cantidad de votos positivos. Saludos – Reinier Hernández Aug 01 '17 at 14:19
Ohhh, gracias por la informacion @Reinier, eso no lo sabia, soy nuevo en stack – Risa__B Aug 01 '17 at 15:31
@ReinierHernándezÁvila No, el OP debe dar la recompensa manualmente, si pasadas 24 horas desde que termina el plazo no lo ha hecho se entrega automáticamente la mitad de la recompensa a la respuesta con más votos. La recompensa no tiene por qué ir para la respuesta aceptada. – Aug 01 '17 at 19:19
@blonfu te agradesco la rectificación, entonces fui yo el que entendió mal las cosas. Risa__B disculpame por darte una mala información – Reinier Hernández Aug 01 '17 at 19:22
@ReinierHernándezÁvila no hay problema, aquí está la información sobre el tema: https://es.stackoverflow.com/help/privileges/set-bounties – Aug 01 '17 at 19:24
Bueno, gracias a ambos por la aclaraciones y las informaciones, voy a leer ese linl de los bounties para obtener mas informacion – Risa__B Aug 01 '17 at 19:41

Carmen · Answer 2 · 2017-08-01T14:25:29.310

Otro modo, usando únicamente mostrar en línea y asignando porcentajes a la anchura de los elementos por css. Además están alineados en vertical en la parte superior para que se asemejen al formato buscado.

.views {
  width: 100%;
  border-top: none;
  background-color: white;
  border-left: 1px solid rgb(230, 230, 230);
  border-right: 1px solid rgb(230, 230, 230);
  border-bottom: 1px solid rgb(230, 230, 230);
}

.views .view-links {
  list-style-type: none;
  margin: 0;
  padding: 0 0px;
  font-size: .99em;
}

.views .view-links li {
  padding: 10px 2%;
  border-top: 1px solid rgb(230, 230, 230);
}

.w100 {
width: 100%;
}

.views .view-links li div a {
  text-decoration: none;
  display: block;
}

.views .view-links li a div, .views .view-links li a img, .views .view-links li a p {
  display: inline-block;
  vertical-align: top;
  margin-top: 10px;
}

.views .view-links li a img {
margin-right: 5%;
max-width: 10%;
}

.views .view-links li a p {
width: 55%;
margin-right: 5%;
}


.view-preview {
  color: #000;
  width: 15%;
  text-align: right;
}

.length {
  color: #000;
  width: 10%;
  text-align: right;
}

<div class="views">
  <ul class="view-links">
    <li>
      <div class="w100">
        <a href="#">
            <img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png">
            <p>audio video audio video audio video</p>
            <div class="view-preview">&nbsp;Vista Previa</div>
            <div class="length">&nbsp;02:34</div>
        </a>
      </div>
    </li>
    <li>
      <div>
        <a href="#">
            <img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png">
            <p>audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video
          audio video audio video audio video audio video audio video audio video audio video audio video audio video</p>
            <div class="view-preview">&nbsp;Vista Previa</div>
            <div class="length">&nbsp;02:34</div>
        </a>
      </div>
    </li>
    <li>
      <div>
        <a href="#">
            <img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"> 
            <p>audio video audio video audio video</p>
            <div class="view-preview">&nbsp;Vista Previa</div>
            <div class="length">&nbsp;02:34</div>
        </a>
      </div>
    </li>
  </ul>
</div>

score 3 · Answer 3 · edited Oct 19 '17 at 14:47

Es mucho más simple hacerlo con tablas:

table{
  border:none;
  color:#333;
  cursor:default;
  margin:3px;
}
table tr td a{
 text-decoration:none;
}

table tr{
  background:white; 
  border:solid 1px #ccc;
}
table tr:hover{
  background:#f9f9f9; 
}
table td{
   border:none;
}
table img{
  cursor:pointer;
  padding:8px;
}

<table cellspacing="0" cellpadding="0">
    <tr>
      <td>
        <img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"> 
      </td>
      <td>
        audio video audio video audio video  audio video audio video audio video  audio video audio video audio video  audio video audio video audio video
      </td>
      <td>
        <a href="">Vista previa</a>        
      </td>
      <td>
         <a href="">02:44</a>
      </td>
    </tr>
 <tr>
      <td>
        <img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"> 
      </td>
      <td>
        audio video audio video audio video  audio video audio video audio video  audio video audio video audio video  audio video audio video audio video
      </td>
      <td>
        <a href="">Vista previa</a>        
      </td>
      <td>
         <a href="">02:44</a>
      </td>
    </tr>
 <tr>
      <td>
        <img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"> 
      </td>
      <td>
        audio video audio video audio video  audio video audio video audio video  audio video audio video audio video  audio video audio video audio video
      </td>
      <td>
        <a href="">Vista previa</a>        
      </td>
      <td>
         <a href="">02:44</a>
      </td>
    </tr>
  </table>

0 CSS complicado. Las tablas son tan incomprendidas.

Actualizacion:

Me gustaría aclarar algo. Entiendo perfectamente que haya personas que no les gusten utilizar tablas o ciertos componentes que parecen desactualizados. Pero ¿por qué utilizar reglas CSS complejas para una tarea tan simple? O que tal el soporte de las reglas CSS entre navegadores, ¿seguro que funcionará en todos los navegadores y no habrá que crear hacks para que funcione?

Es perfecto el ejemplo, pero existe errores al tener un texto corto en los enlace las tabla se hace más pequeña que la otra, por último no me agrada del todo el uso de las tablas, demasiado extenso para mi gusto es más simple utilizando las etiquetas `div ul li` y un poco de estilos css. un +1 por el aporte — J. Mick, Jul 28 '17 at 05:22
No veo el problema de las tablas. En realidad, hacerlo con div ul y li lo hace mucho mas complicado para una tarea tan simple. En tiendo que no te gusten pero si funciona perfectamente, facil de mantener sin reglas css complicadas, ¿porque no utilizarlo? — Einer, Jul 31 '17 at 12:30
Bueno amigo la respuesta es muy diferente a la mía pero será de mucha utilidad pero ya pase la etapa de diseño web con tablas recuerdo que las primeras páginas web la realizabamos con tablas pero ya es tiempo de pasado las tablas son útiles pero en otras circunstancias. — J. Mick, Jul 31 '17 at 18:55

Benjamín Guzmán · Answer 4 · 2017-07-28T04:29:44.727

Se puede hacer con la propiedad flex, aquí un pequeño ejemplo de eso:

body, html{
 height: 100%;
}
#main{
 width: 100%;
 height: 15%;
}
 .boton, .vista, .duracion{
  width: 20px;
  height: 20px;
  margin: 20px;
 }
 .boton{
  background-color: red;
 }
 .vista{
  background-color: blue;
 }
 .duracion{
  background-color: green;
 }
 li{
  display: flex;
  justify-content: center;
 }
 ul{
  width: 100%
 }

<div id="main">
 <ul>
  <li>
   <div class="boton"></div>
   <p>audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video</p>
   <div class="vista"></div>
   <div class="duracion"></div>
  </li>
  <li>
   <div class="boton"></div>
   <p>audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video</p>
   <div class="vista"></div>
   <div class="duracion"></div>
  </li>
  <li>
   <div class="boton"></div>
   <p>audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video</p>
   <div class="vista"></div>
   <div class="duracion"></div>
  </li>
 </ul>
</div>

Se ve cómo sigue teniendo la estructura y no hay nada raro, el párrafo tiene white-space.

Ahora, si eso lo llevamos a tú código, queda:

.views {
 width: 100%;
  border-top: none;
  background-color: white;
  border-left: 1px solid rgb(230, 230, 230);
  border-right: 1px solid rgb(230, 230, 230);
  border-bottom: 1px solid rgb(230, 230, 230);
}

.views .view-links {
 list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: .99em;
}

.views .view-links li {
 padding: 9px 20px 9px 20px;
 border-top: 1px solid rgb(230, 230, 230);
}

.view-preview {
 color: #000;
}

.length {
  color: #000;
}
.view-links li div a{
   text-decoration: none;
 display: flex;
 /*Prueba con:
 justify-content: space-around;
 justify-content: space-between;
 */
}
/*Para que la imagen no se distorsione*/
img{
 align-self: center;
 object-fit: contain;
}
img, .view-preview, .length{
 padding: 0 1%;/*Para que no estén tan pegados*/
}

<div class="views">
 <ul class="view-links">
  <li>
    <div>
      <a href="#"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"> 
      audio video audio video audio video
      <div class="view-preview"><span>&nbsp;Vista Previa</span></div>
      <div class="length">&nbsp;02:34</div></a>
    </div>
  </li>
  <li>
    <div>
      <a href="#"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"> audio video audio video audio video  audio video audio video audio video  audio video audio video audio video  audio video audio video audio video
      <div class="view-preview">&nbsp;Vista Previa</div>
      <div class="length">&nbsp;02:34</div></a>
    </div>
  </li>
  <li>
    <div>
      <a href="#"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"> audio video audio video audio video
      <div class="length">&nbsp;02:34</div></a>
    </div>
  </li>
 </ul>
</div>

Actualización

Usando display: table

.views {
  background-color: white;
  border-left: 1px solid rgb(230, 230, 230);
  border-right: 1px solid rgb(230, 230, 230);
  border-bottom: 1px solid rgb(230, 230, 230);
}

.views .view-links {
 list-style-type: none;
  margin: 0;
  padding: 1%;
  font-size: .99em;
}

.view-preview {
 color: #000;
}

li{
 padding-bottom: .1%;
}
li > div{
 padding: .4%;
 border: #DDD 1px solid;
}

ul li:hover{
 background:#f9f9f9;/*de Einer*/
}
li div{
 display: table;
 align-items: baseline;
}
div a{
 display: table-row;
 text-decoration: none;
 color: black;
}
a div, a span{
 display: table-cell;
 vertical-align: middle;
}

<div class="views">
 <ul class="view-links">
  <li>
    <div>
      <a href="#"><span><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></span>
      <span>audio video audio video audio video  audio video audio video audio video  audio video audio video audio video  audio video audio video audio video</span>
      <div class="view-preview">&nbsp;Vista Previa</div>
      <div class="length">&nbsp;02:34</div></a>
    </div>
  </li>
  <li>
    <div>
      <a href="#"><span><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></span>
      <span>audio video audio video audio video  audio video audio video audio video  audio video audio video audio video  audio video audio video audio video</span>
      <div class="view-preview">&nbsp;Vista Previa</div>
      <div class="length">&nbsp;02:34</div></a>
    </div>
  </li>
  <li>
    <div>
      <a href="#"><span><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></span>
      <span>audio video audio video audio video  audio video audio video audio video  audio video audio video audio video  audio video audio video audio video</span>
      <div class="view-preview">&nbsp;Vista Previa</div>
      <div class="length">&nbsp;02:34</div></a>
    </div>
  </li>
 </ul>
</div>

Es perfecto lo que le has implementado a mi código pero existe un problema el tiempo del video/audio debe estar fijo en su posición igualmente la vista previa puedes observar la primera y la segunda imagen... al realizarlo como lo has implementado hubiese solo omitido los **div** `
` & `
` y hubiese realizado directamente de la siguiente manera que daría el mismo resultado `audio video audio video audio video vista previa 02:33` — J. Mick, Jul 28 '17 at 02:46
Lo ideal es que el diseño hubiese quedado como la primera respuesta de mi pregunta lo malo es que está utilizando **tablas:** yo prefiero no utilizarlas puedes lograr el mismo efecto de las **tablas** pero utilizando mi código como lo has realizado pero obteniendo el resultado cómo las **tablas** — J. Mick, Jul 28 '17 at 02:50
Ahora sobre el [comentario sobre el hover](https://es.stackoverflow.com/questions/91103/c%C3%B3mo-solucionar-errores-en-los-enlaces-html?noredirect=1#comment167848_91103) ejecuta el código de la primera respuesta de **Einer** expande la ejecución en página completa y pasa el maous el puntero sobre el contenedor de cada enlace y veras el **hover** o el **focus** que causa. — J. Mick, Jul 28 '17 at 02:56
En ese caso, se podría usar la propiedad display con el atributo table, que ya está en la actualización de la respuesta. — Benjamín Guzmán, Jul 28 '17 at 04:31
existe errores al tener un texto corto en los enlace el `div` se hace más pequeño que el otro y eso causa un desordenamiento igual. — J. Mick, Jul 28 '17 at 05:24
no entiendo el comentario, el enlace es el elemento que contiene a la imagen y `divs`, lo que quieres es que todo tenga un _width_ igual?? para los tres elementos el _width_ sería de 33.333333?? — Benjamín Guzmán, Jul 31 '17 at 18:17
No amigo, observa la respuesta de Risa__B a llegado a entender el problema ejecuta su código y observa como la vista previa el tiempo del video conserva su espacio sin que se desordene. — J. Mick, Jul 31 '17 at 18:51

score 2 · Answer 5 · answered Jul 31 '17 at 08:24

Ahora ya te he entendido. A ver si te vale esto:

.views {
  width: 100%;
  background-color: white;
  border-left: 1px solid rgb(230, 230, 230);
  border-right: 1px solid rgb(230, 230, 230);
  border-bottom: 1px solid rgb(230, 230, 230);
}

.views .view-links {
  list-style-type: none;
  margin: 0;
  padding: 0 0px;
  font-size: .99em;
}

.views .view-links li {
  padding: 9px 20px 9px 20px;
  border-top: 1px solid rgb(230, 230, 230);
}

.views .view-links li div a {
  text-decoration: none;
  display: block;
}

.views .view-links li div .row{
  display: flex;
  flex-direction: row;
  align-items: center;
  /* justify-content: space-between; */
}
.views .view-links li div .row .text{
  margin-left: 5px;
  margin-right: 5px;
}

<div class="views">
  <ul class="view-links">
<li>
  <div>
    <a class="row" href="#">
      <img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"> 
      <div class="text"> audio video audio video audio video </div>
      <div class="view-preview">&nbsp;Vista Previa</div>
      <div class="length">&nbsp;02:34</div>
    </a>
  </div>
</li>
<li>
  <div>
    <a class="row" href="#">
      <img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"> 
      <div class="text"> audio video audio video audio video  audio video audio video audio video  audio video audio video
        audio video  audio video audio video audio video audio video audio video audio video audio video 
        audio video audio video audio video audio video audio video audio video audio video </div>
      <div class="view-preview">&nbsp;Vista Previa</div>
      <div class="length">&nbsp;02:34</div>
    </a>
  </div>
</li>
<li>
  <div>
    <a class="row" href="#">
      <img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"> 
      <div class="text">audio video audio video audio video </div>
      <div class="length">&nbsp;02:34</div>
    </a>
  </div>
</li>
  </ul>
</div>

El ejemplo es perfecto pero la vista previa y el tiempo del audio & video deben estar siempre alienados a la izquierda en un orden especifico debido a que su tamaño del enlace es muy mínimo, he actualizado mi pregunta observa las imágenes amigo. — J. Mick, Jul 31 '17 at 12:21
la vista previa y el tiempo del audio & video deben conservar su orden si puedes observar en fila están sin ningún desorden sin importar que tan inmenso o no sean los enlaces. — J. Mick, Jul 31 '17 at 15:08
Aunque esta respuesta puede servir para resolver el problema, no queda muy claro cómo lo hace o cómo es diferente a las otras respuestas. Es sólo código sin ningún tipo de comentario o explicación. — Alvaro Montoro, Aug 01 '17 at 14:22

¿Cómo solucionar errores en los enlaces?

5 Answers5

Actualización

Linked