CSS position: fixe avec barre de défilement horizontale pour débordant de contenu

Je suis en utilisant le CSS position: fixed pour un div tag. Mon navigateur barre de défilement horizontale est en mouvement, mais je ne vois pas de texte. C'est ce que j'ai essayé jusqu'à présent:

<html>
<head>
    <style type="text/css">
    .test {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, .2);
    overflow-x: auto;
    white-space: nowrap;
     width:2500px;
}
        body {
        }

    </style>
</head>
<body>
        <div class="test">
            test data  test data  test datatest data  test data  test datatest data     test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test datatest data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data
        </div>

</body>
</html>

J'ai besoin d'afficher le texte en une seule ligne avec un navigateur barre de défilement horizontale(pas de div barre de défilement)

InformationsquelleAutor user3194721 | 2014-04-24
  1. 2

    Vous voulez probablement le débordement de texte pour créer une barre de défilement. Vous devez laisser le navigateur le savez, il ne faut pas briser les lignes.

    .test {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, .2);
    overflow-x: auto;
    padding: 10px;
    white-space: nowrap;
}

    voir mon jsFiddle. J'ai juste ajouté un arrière-plan et du remplissage de sorte qu'il est mieux visible.

    • Oui, j'ai besoin d'afficher du texte dans une seule ligne avec la barre de défilement horizontale.
    • Vous avez dit quelque chose à propos d'une barre de défilement verticale dans votre question initiale, j'ai mis à jour ma réponse.
    • Après l'ajout de vos styles, je ne vois aucune barre de défilement horizontale 🙁
    • avez-vous une capture d'écran? Je travaille pour moi dans Firefox 30 et le 34.
    • désolé, je suis en train de vous confondre. Je suis à la recherche de navigateur barre de défilement,pas de div barre de défilement
    • Qu'entendez-vous en disant: "navigateur barre de défilement'?
    • laissez-nous continuer cette discussion dans le chat

    InformationsquelleAutor kelunik
  2. 0

    Étant donné que vous définissez la largeur de votre être 2500px, il ne s'affiche pas dans votre navigateur. Donc, j'ai ajouté une hauteur spécifiée et la réduction de la largeur pour qu'il soit clair qu'ils sont affichés. Aussi définir à la fois (x et y) pour faire défiler - vous pouvez le modifier comme bon vous semble en fonction de vos besoins.

    .test {
    position: fixed;
    width: 250px;
    height: 150px;
    overflow: scroll;
}
    • Oui, j'ai besoin d'afficher du texte dans une seule ligne avec la barre de défilement horizontale.
    • bien, d'abord vous avez mentionné "vertical" pour que les changements des choses 🙂 - dans ce cas, ajouter white-space: nowrap; à votre .edit css
    InformationsquelleAutor ochi
  3. 0
    .test {
    position: fixed;
    width: 2500px;
    height:100%;
}
    InformationsquelleAutor
  4. 0

    Tout d'abord, si vous voulez donner de défilement verticale avec votre div, vous devez spécifier height.

    .test {
  position: fixed;
  width: 2500px;
  height: 100%;
  overflow: scroll;
}
    InformationsquelleAutor Ishan Jain
  5. 0

    Dans mon expérience, parfois, vous faites position: fixed; pour certains div qui ont des enfants div à l'intérieur et à cet enfant div contient du contenu qui va faire défiler. vous devez ajouter display: flex; à l'enfant div.

    Sans l'ajout de ce style à cette situation, il ne marche pas bien.

    InformationsquelleAutor Amir Forsati
  6. 0

    Vous pouvez essayer les suivantes: 

    <html>
<head>
    <style type="text/css">
    .test {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, .2);
    white-space: nowrap;
     width:2500px;
}
        body {
        }

    </style>
</head>
<body>
        <div class="test">
            <p>test data  test data  test datatest data  test data  test datatest data     test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test datatest data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data test data  test data  test datatest data  test data  test datatest data     test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test datatest data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data test data  test data  test datatest data  test data  test datatest data     test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test datatest data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data</p>
        </div>

</body>
</html>
    InformationsquelleAutor Kamran Siddique