positionnement

css J'ai téléchargé une partie de mon écran ci-dessous (lien: http://yfrog.com/0d30127380p) alt text http://img13.imageshack.us/img13/9098/30127380.png positionnement

Il fait partie d'un forum, donc il y a des éléments ci-dessus et en dessous. Le "Response Req .. Date" a une étiquette, un sélecteur de date, et deux contrôle de sélection déroulant pour le temps. J'ai essayé de définir la largeur de l'élément datepicker, et une marge de droite afin que les sélecteurs de temps se positionnent à côté de lui. Mais il est toujours assis en dessous. Je ne suis pas bon en positionnement CSS, donc toute suggestion serait très appréciée.

<div class="wrapper "> 
    <label for="responseRequiredDate"> 
     Response Required Date 
     <span class="indicator">*</span> 
    </label> 
    <input type="hidden" name="responseRequiredDate" value="struct" /><div class="datetimepicker"> 
    <div class="datePicker"> 
    </div>   
    <script> ...</script> 
    <div class="timepicker"><select .... 
    </div> </div>

le sélecteur de date insère une balise de script, cela pose un problème. probablement pas. La css calculée à partir de firebug est donnée ci-dessous.

le seul style actuellement différent de inherited est l'affichage: inline .. J'ai essayé float, clear, margin etc sans succès. donc les enlevés pour plus de clarté. S'il vous plaît laissez-moi savoir si vous avez besoin d'informations supplémentaires.

datePicker : 

font-family verdana,arial,helvetica,sans-serif 
font-size 12.8px 
font-weight 400 
font-style normal 
color #222222 
text-transform none 
text-decoration none 
letter-spacing normal 
word-spacing 0 
line-height 20.7833px 
text-align start 
vertical-align baseline 
direction ltr 
Background 
background-color transparent 
background-image none 
background-repeat repeat 
background-position 0 0 
background-attachment scroll 
opacity 1 
Box Model 
width auto 
height auto 
top auto 
right auto 
bottom auto 
left auto 
margin-top 0 
margin-right 0 
margin-bottom 0 
margin-left 0 
padding-top 0 
padding-right 0 
padding-bottom 0 
padding-left 0 
border-top-width 0 
border-right-width 0 
border-bottom-width 0 
border-left-width 0 
border-top-color #222222 
border-right-color #222222 
border-bottom-color #222222 
border-left-color #222222 
border-top-style none 
border-right-style none 
border-bottom-style none 
border-left-style none 
Layout 
position static 
display inline 
visibility visible 
z-index auto 
overflow-x visible 
overflow-y visible 
white-space normal 
clip auto 
float none 
clear none 
-moz-box-sizing content-box 
Other 
cursor auto 
list-style-image none 
list-style-position outside 
list-style-type disc 
marker-offset auto

TimePicker:

font-family verdana,arial,helvetica,sans-serif 
font-size 12.8px 
font-weight 400 
font-style normal 
color #222222 
text-transform none 
text-decoration none 
letter-spacing normal 
word-spacing 0 
line-height 20.7833px 
text-align start 
vertical-align baseline 
direction ltr 
Background 
background-color transparent 
background-image none 
background-repeat repeat 
background-position 0 0 
background-attachment scroll 
opacity 1 
Box Model 
width auto 
height auto 
top auto 
right auto 
bottom auto 
left auto 
margin-top 0 
margin-right 0 
margin-bottom 0 
margin-left 0 
padding-top 0 
padding-right 0 
padding-bottom 0 
padding-left 0 
border-top-width 0 
border-right-width 0 
border-bottom-width 0 
border-left-width 0 
border-top-color #222222 
border-right-color #222222 
border-bottom-color #222222 
border-left-color #222222 
border-top-style none 
border-right-style none 
border-bottom-style none 
border-left-style none 
Layout 
position static 
display inline 
visibility visible 
z-index auto 
overflow-x visible 
overflow-y visible 
white-space normal 
clip auto 
float none 
clear both 
-moz-box-sizing content-box 
Other 
cursor auto 
list-style-image none 
list-style-position outside 
list-style-type disc 
marker-offset auto

Source

2010-06-01 bsr

Pouvez-vous nous montrer le CSS que vous avez utilisé pour produire l'exemple dans votre capture d'écran? Et quel datePicker et timePicker utilisez-vous? –

merci Marcel .. le css est montré ci-dessus .. le datepicker est de YUI, mais le sélecteur de temps est rendu personnalisé (deux entrée de sélection). J'utilise le temps de Joda, donc je ne suis pas sûr qu'il existe déjà des contrôles similaires. Tout fonctionne, sauf le positionnement, que je suppose que peut être résolu par CSS. – bsr

Eh bien, un div qui est ne flotte pas toujours pousser le contenu suivant ci-dessous lui-même. Vous pouvez essayer de définir display: inline sur le div, ou en faire un span.

Source

2010-06-01 20:47:04 pederOverland

J'ai essayé float: droit sur div diviseur timepicker, et ajouté la marge de droite + set largeur sur le datepicker, s'attendant à ce que le timepicker va en ligne, mais ce n'est pas le cas. si j'ai appliqué clairement après le style, les contrôles restants dans les pages sont également flottés à droite .. Je sais, je manque quelque chose, mais pas intuitif pour moi :-( – bsr

span n'a pas fonctionné, peut-être parce que, à chaque fois et Le sélecteur de date contient beaucoup de div. – bsr

Votre timepicker a le clear: both property set, ce qui le fait passer en-dessous de n'importe quel élément précédent.Vous pouvez essayer de faire les deux éléments block (display: block), supprimer les propriétés clear et ajouter float: left – pederOverland

Vous devriez afficher les div-boîtes comme des éléments en ligne:

.datePicker, .timepicker { 
    display: inline; 
}

Source

2010-06-01 20:44:20 stefanglase

cela n'a pas fonctionné .. bien que je puisse voir le CSS appliqué dans Firebug. – bsr

display: inline; Résolution du problème.

Source

2015-02-25 23:57:30 marty

Pouvez-vous fournir un peu plus de détails dans votre réponse? –

positionnement

Répondre

Questions connexes