[Résolu] Texte retour à la ligne, div suivante se met à la ligne aussi

Bonjour,
J'aimerai avoir un menu où les mots longs se mettent sur 2 lignes et les mots courts soient centrés en hauteur.
Mais avec le css que j'ai mis la dernière div se met à la ligne du dessous.

Rien ne vaut une bonne image pour expliquer mon problème.

Merci de votre aide.



Html

<div class="menu_daily_management">
	<div class="sub_menu_daily_management">
		<div class="element_menu">YYYYYYY	YYYYYY</div>
		<div class="element_menu">YYYYYYY	YYYYYY</div>
		<div class="element_menu">YYYYYYY	YYYYYY</div>
		<div class="element_menu">ZZZZZZZ ZZZZZZ</div>
		<div class="element_menu" id ="search">xxxxxxx</div>
		<div class="title_sub_menu_daily_management">TRAVAIL JOURNALIER</div>
	</div>
</div>

Css

.menu_daily_management
{
    background : #fff;
}

.element_menu
{
    display: inline-block;
    padding : 10px 0 0 15px;
    width : 70px;
    height : 32px;
    background-color : yellow;
}

.title_sub_menu_daily_management
{
    width : 100%;
    text-align: center;
    padding : 0 0 10px 0;
    background-color : Red;
}

Modifié par neka11 (14 Oct 2014 - 10:45)

Bonjour,


Je dirais qu'il manque un vertical-align:top; sur tes inline-block.
Modifié par _laurent (14 Oct 2014 - 10:34)

Super merci ca fontionne bien

j'ai rajouté line-height sur search pour centré en plus

#search
{
    line-height : 32px;
}