Positionner deux span sur la meme ligne

**ChtiGeeX** · 17/10/2006, 13h54

Bonjour,

J'ai un probleme qui est tres simple a expliquer ...

J'ai un DIV qui fait office de ligne et je voudrais mettre des cellules dedans sous la forme de SPAN.

Le problème est que je ne donne pas de taille a mon DIV, il est donc de fait a 100% de la page en largeur ... à l'interieur j'ajoute deux SPAN que je voudrais mettre cote à cote hors actuellement en mettant un texte suffisamment long dans les SPAN, le deuxieme SPAN passe à la ligne alors que j'aimerai le garder dans la ligné du premier SPAN et afficher une barre de defilement horizontale ...

J'ai cherché avec le display:inline; mais rien à faire ca ne veut pas s'afficher comme je le voudrais ... voici mon code :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <title></title>
  <style type="text/css">
    div.row
    {
        border : 1px solid;
        background-color : yellow;
    }
    div.frame
    {
        border : 1px solid;
        background-color : yellow;
        overflow: auto;
        height: 50px;
    }
    div.row span.col1
    {
        display : inline;
        border : 1px dotted;
        background-color : red;
        color : white;
    }
    div.row span.col2
    {
        display : inline;
        border : 1px dotted;
        background-color : blue;
        color : white;
    }
  </style>
</head>
<body>
    <div class="row">
        <p style="display:inline;">
        <span class="col1">
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        </span>
        <span class="col2">
        bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
        </span>
        </p>
    </div>
    <div class="frame">
        blabla<br>
        blibli<br>
        blablo<br>
        bloblo<br>
        blobli<br>
        blublu<br>
    <div>
</body>
</html>