Faire un display horizontal avec un overflow horizontal
Bonjour,
Je débute en développement web, d'où ma question assez simple:
Mon objectif est de faire des boutons ayant des dimensions hauteur-largueur définies. Ces boutons doivent être affichés dans une barre. Si la barre est trop petite notamment en largueur, je veux un ascenseur uniquement horizontal.
Quelque soit les propriétés de display que j'utilise, je n'y arrive pas:
Voici mon code html:
Code:
1
2
3
4
5
6
7
8
| <div id="bar_zone_button">
<a id ="lights" nb="1">LIGHTS</a>
<a id ="audio" nb="2">AUDIO</a>
<a id ="value" nb="3">VALUE</a>
<a id ="option" nb="4">OPTION</a>
<a id ="alert" nb="5">ALERT</a>
<a id ="other" nb="6">OTHER</a>
</div> |
Voici mon code css:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| #bar_zone_button
{
/* display: inline-block;*/
width: 70%;
height: 70px;
border: 3px grey solid;
overflow-x: scroll;
/* overflow-y: hidden;*/
}
#bar_zone_button a
{
/*
block : les uns au dessus des autres,
inline-block : une ligne de 4 et une ligne de 2
inline : une ligne avec tous les éléments, mais ils n'ont plus les dimensions voulus
list-item : les uns au dessus des autres avec une pastille en plus
*/
display: inline-block;
width: 150px;
height: 50px;
background-color: white;
margin: 10px;
border: 3px grey solid;
border-radius: 10px;
position: relative;
vertical-align: bottom;
} |
Auriez-vous une piste ?
Merci,
