Problème avec display:block, les élément sont les un sous les autres

**seb.49** · 13/01/2010, 21h04

Bonjour

Voici une page html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<body>
<div style="background-color: Red;" style="text-align: center">
        <asp:Button ID="BT_SEARCH_PUNAISE" runat="server" Text="Chercher" OnClick="BT_SEARCH_PUNAISE_Click"
            meta:resourcekey="BT_SEARCH_PUNAISEResource1" />
        <input type="button" id="BTN_CALL_UPDATE_PUNAISE" value="Mettre à jour" onclick="UpdatePunaise2();" />
        <input type="button" id="BTN_CALL_ADD_PUNAISE" value="Ajouter" onclick="CreatePunaise2();" />
        <input type="button" id="BTN_CLOSE_SEARCH_PUNAISE" value="Fermer" onclick="MasqueWuc();" />
    </div>
 
<br/><br/>	
<div style="background-color: Red;" style="text-align: center">
        <asp:Button ID="BT_SEARCH_PUNAISE" runat="server" Text="Chercher" OnClick="BT_SEARCH_PUNAISE_Click"
            meta:resourcekey="BT_SEARCH_PUNAISEResource1" />
        <input type="button" id="BTN_CALL_UPDATE_PUNAISE" value="Mettre à jour" onclick="UpdatePunaise2();" style="display:block;"/>
        <input type="button" id="BTN_CALL_ADD_PUNAISE" value="Ajouter" onclick="CreatePunaise2();" style="display:block;"/>
        <input type="button" id="BTN_CLOSE_SEARCH_PUNAISE" value="Fermer" onclick="MasqueWuc();" style="display:block;"/>
    </div>
 
	</body>
	</html>

Qui peut m'expliquer pourquoi dans la 2nd DIV, les boutons sont les un sous les autres et pas dans la 1ère.

J'ai fais cette page allégé pour comprendre pourquoi quand je change le display par javascript, la mise en forme est détruite.

Merci

**12monkeys** · 13/01/2010, 21h43

Bonsoir

Parce que c'est le comportement par défaut des éléments block : ils se positionnent les uns sous les autres.

Les div sont en display:block par défaut, quand tu en places plusieurs dans une page, ils s'affichent les uns sous les autres, dans ton exemple c'est pareil...

**seb.49** · 13/01/2010, 21h54

La solution : display:inline-block.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div style="background-color: Red;width:500px;text-align: center;">
        <input type="button" id="BTN_CALL_UPDATE_PUNAISE" value="Mettre à jour" onclick="UpdatePunaise2();" style="display:inline-block;"/>
        <input type="button" id="BTN_CALL_ADD_PUNAISE" value="Ajouter" onclick="CreatePunaise2();" style="display:inline-block;"/>
        <input type="button" id="BTN_CLOSE_SEARCH_PUNAISE" value="Fermer" onclick="MasqueWuc();" style="display:inline-block;"/>
    </div>