Usar márgenes de span para alinear texto

Un poco nuevo para html, por lo que si necesita más explicaciones o si esta pregunta simplemente no tiene sentido, no dude en decirlo.Usar márgenes de span para alinear texto

Estoy usando div para diseñar un formulario web Estoy diseñando y usando el & nbsp para mover texto dentro de un div no siempre produce el resultado que quiero en cuanto al diseño de la página.

empecé a experimentar y mediante el uso de:

<span style="margin-left:(variable)px"></span>

soy capaz de mover el texto exactamente donde yo quiero.

Mi pregunta es esta, ¿es esta una mala práctica? ¿Hay una mejor manera de hacer lo que estoy tratando de hacer, o de una manera más convencional? O incluso algo incorporado en html que aún no he descubierto.

Gracias

* Agregado bloque de código para mostrar lo que estoy tratando de lograr

Complainant's Address 
    <input type="text" size="50" id="complainantAddress"/> 
    <span style="margin-left:3px"></span> 
    City 
    <input type="text" name="city" maxlength="15" size="15"/> 
    <span style="margin-left:16px"></span> 
    State 
    </div>

Fuente

2012-03-08 Michael Cole

puede ser útil si ha publicado una muestra de su código, ¡pero usar css para espaciar es definitivamente mucho mejor que muchos espacios sin frenado! – Evert

El uso de espacios no rompibles para el diseño/posicionamiento es una mala práctica. Lo que está tratando de hacer con los atributos style es mejor, pero los atributos de estilo en línea también se consideran una mala práctica.
Los atributos de estilo son difíciles de mantener y se duplica mucha información, etc. Además, este estilo tiene la especificidad más alta y no puede ser sobrescrito por otros estilos (como archivos CSS de usuario). Deben usarse con precaución.

Utilice los atributos CSS margin, padding y text-align para esto.

Muestra
http://jsfiddle.net/UYUA7/

HTML

Text<br /> 

&nbsp;&nbsp;&nbsp;&nbsp;Text <!-- Do NOT use this --> 

<div class="center">Center</div> 
<div class="right">Right</div> 
<div class="indent">Indented</div>

CSS

.center { 
    text-align: center; 
} 

.right { 
    text-align: right; 
} 

.indent { 
    margin-left: 20px; 
}

Fuente

2012-03-08 16:21:24 Smamatti

Gran respuesta, incluso voté por votación. :) Mi única preocupación es que hayas dicho que "los atributos de estilo en línea son malas prácticas", lo cual no es realmente el caso. El uso de estilos en línea para elementos únicos es perfectamente aceptable. No todo debe estar marcado con ids y clases. – evasilchenko

@DeviantSeev Puede haber algunos casos en los que el estilo en línea sea aceptable. En general, es una mala práctica y no debe aprenderlo de esta manera, cuando está empezando a _aprender CSS_. - Prefiero el estricto desprendimiento de contenido/estructura y estilo. – Smamatti

Lo siento pero no estoy de acuerdo con usted. El hecho de que prefiera que se haga algo de cierta manera no significa que sea una "mala práctica". En realidad, estoy a favor de usar principalmente clases para el estilo, pero llamar a las malas prácticas de estilo en línea es exagerado. No existe una regla que diga que cada elemento debe ser diseñado por una clase o id. De hecho, al hacerlo, su hoja de estilo se hinchará innecesariamente y será más difícil de seguir. Solo mis dos centavos. – evasilchenko

Lo que está haciendo es en realidad una mejor wa y para hacer el espaciado, que depender de & nbsps. Esto le dará una flexibilidad mucho mayor a largo plazo y le permitirá hacer cambios más rápidamente. (Menos de mecanografía)

La única otra cosa que recomiendo es leer a través de este manual de CSS:

http://www.w3schools.com/css/css_intro.asp

Esto le ayudará a continuar a aprender acerca de la posición con CSS.

ACTUALIZACIÓN:

Esto es lo que su código puede verse como:

CSS - puede utilizar en la cabecera

<style type="text/css"> 
#complainantAddress { 
    margin-right: 3px; 
} 

#city { 
    margin-right: 16px; 
} 
</style>

HTML

Complainant's Address: <input type="text" size="50" id="complainantAddress"/> 
City: <input type="text" name="city" maxlength="15" size="15" id="city"/>

Aviso que yo creó dos estilos CSS, uno para cada cuadro de entrada coincidente. Dentro de cada estilo, definí un margen que agregaría el espaciado apropiado a la derecha del cuadro de entrada.

Por lo tanto, el primer cuadro de entrada llamado "queryntAddress" tendrá un espaciado de 3px a la derecha y el segundo cuyo identificador es "city" tendrá un espaciado de 16px a la derecha del mismo.

Fuente

2012-03-08 16:23:35 evasilchenko

Usar márgenes de span para alinear texto

Respuesta

Cuestiones relacionadas