Código HTML :
<style type="text/css"> .producto{ width:500px; } .producto li{ list-style:none; padding-left:1px; margin-top:1px; width:45%; display: inline-block; } .producto li strong{ display: inline-block; width: 30%; } .producto li span{ width:65%; } </style> <div class="producto"> <ul class="producto"> <li><strong>Categoria:</strong> <span ui:field="spRealtyCategoryName">Este es un texto super largo de prueba</span></li> <li><strong>Tipo Operacion:</strong> <span ui:field="spOperationType">asdfasdf</span></li> <li><strong>Precio:</strong><span ui:field="spFromPrice">asfd</span></li> <li><strong>Cuartos:</strong> <span ui:field="spBedrooms">asdf</span></li> <li><strong>Baños:</strong> <span ui:field="spBathrooms">asdf</span></li> <li><strong>Est:</strong> <span ui:field="spParkingSpaces">asdf</span></li> <li><strong>Terreno:</strong> <span ui:field="spLotSize">asdf</span></li> <li><strong>Const:</strong> <span ui:field="spConstructionSize">asdf</span></li> </ul> </div>
Tengo una lista a dos columnas y dentro de cada tag li tengo un strong y un span(necesario para instanciarlo y setearle valores desde GWT) pero el problema es que cuando el texto del span es mas largo queda debajo del strong, cuando deberia alinearse debajo de donde comienza el texto, osea debajo del strong debe quedar en blanco y el texto debe continiar debajo de donde comenzo el mismo span; como si fuera una sola celda de la tabla.
Les dejo el link de prueba: http://www.jorgelig.com/pruebas/test.html