CSS pour créer un élément déroulant sans

Je crée un élément de liste déroulante personnalisé pour un formulaire et je modifie maintenant le code que j'ai trouvé ici: https : //codepen.io/qwertie/pen/QBYMdZ

Je veux que les éléments li prennent l'espace dont ils ont besoin horizontalement. Si je règle manuellement la largeur de .cb-item sur 200px , cela fonctionne en quelque sorte, mais je veux qu'il se mette à l'échelle automatiquement. P >

J'ai essayé de paramétrer display: inline-block et display: flex sur .cb-item . J'ai joué avec toutes les valeurs de justify-content , mais je ne peux pas obtenir les éléments de la liste déroulante pour utiliser la largeur du contenu de chaque élément li . p>

Comment puis-je le faire?

CSS

<div class="dropdown">
    <span tabindex="0">dropdown menu V</span>
    <div class="less-sticky">
        <ul>
          <li class="cb-item"><a href="http://yes.net">home page</a></li>
          <li class="cb-item"><a href="http://test.net">My home page</a></li>
          <li class="cb-item"><a href="#">Stay on this page</a></li>
          <li class="cb-item"><a href="#">Stay on this page</a></li>
          <li class="cb-item"><a href="#">Stay on this page</a></li>
          <li class="cb-item"><a href="#">Stay on this page</a></li>
          <li class="cb-item"><a href="#">Stay on this page</a></li>
          <li class="cb-item"><a href="#">Stay on this page</a></li>
          <li class="cb-item"><a href="#">fd gddsfgpage</a></li>
          <li class="cb-item"><a href="#">457567456756 757this page</a></li>
          <li class="cb-item"><a href="#">Stay on this page</a></li>
        </ul>
    </div>
</div>

HTML

/* ------------------------------------------ */
/* ----- combobox / dropdown list styling     */
/* ------------------------------------------ */

.less-sticky {
    border-radius: 10px;
    background-color: red !important;

    max-height: 200px;
    margin-top: 7px;
    background-color: rgb(255, 255, 255);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    z-index: 10;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    border-width: 0px 1px 1px;
    border-style: solid solid solid;
    border-color: rgb(220, 220, 220) rgb(220, 220, 220) rgb(220, 220, 220);
}

.dropdown {
    /* "relative" and "inline-block" (or just "block") are needed
     here so that "absolute" works correctly in children */
    position: relative;
    display: inline-block;
}

    .dropdown > *:last-child {
        /* Using `display:block` here has two desirable effects:
     (1) Accessibility: it lets input widgets in the dropdown to
         be selected with the tab key when the dropdown is closed. 
     (2) It lets the opacity transition work.
     But it also makes the contents visible, which is undesirable 
     before the list drops down. To compensate, use `opacity: 0`
     and disable mouse pointer events. Another side effect is that
     the user can select and copy the contents of the hidden list,
     but don't worry, the selected content is invisible. */
        display: block;
        opacity: 0;
        pointer-events: none;
        transition: 0.4s; /* fade out */
        position: absolute;
        left: 0;
        top: 100%;
        border: 1px solid #888;
        background-color: #fff;
        box-shadow: 1px 2px 4px 1px #666;
        box-shadow: 1px 2px 4px 1px #4448;
        z-index: 9999;
        min-width: 100%;
        box-sizing: border-box;
    }
    /* List of situations in which to show the dropdown list.
   - Focus dropdown or non-last child of it => show last-child
   - Focus .downarrow of combobox => show last-child
   - Stay open for focus in last child, unless .less-sticky
   - .sticky last child stays open on hover
   - .less-sticky stays open on hover, ignores focus in last-child */
    .dropdown:focus > *:last-child,
    .dropdown > *:focus ~ *:last-child,
    .dropdown > .less-sticky:last-child:hover {
        display: block;
        opacity: 1;
        transition: 0.15s;
        pointer-events: auto;
    }
/* detect Edge/IE and behave if though less-sticky is on for all
   dropdowns (otherwise links won't be clickable) */
@supports (-ms-ime-align:auto) {
    .dropdown > *:last-child:hover {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }
}
/* detect IE and do the same thing. */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .dropdown > *:last-child:hover {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }
}

.dropdown:not(.sticky) > *:not(:last-child):focus,
.dropdown:focus {
    pointer-events: none; /* Causes second click to close */
}

.downarrow:focus {
    outline: 2px solid #8BF; /* Edge/IE can't do outline transparency */
    outline: 2px solid #48F8;
}


/* ------------------------------------------ */
/* ----- Styling for examples                 */
/* ------------------------------------------ */

.cb-item {
    display: block;
    margin: 0px;
    padding: 2px;
    color: #000;
}

    .cb-item:hover, .cb-item:hover > a:visited {
        color: #fff;
        background-color: #88f;
    }

p >

html css dropdown html-select

---

2 commentaires

Avez-vous essayé width: max-content; ? Bien que ce ne soit pas pris en charge dans certains navigateurs caniuse.com/#search=max-content

---

Possibilité de duplication stackoverflow.com/questions/43362588/… .

---

3 Réponses :

---

2
votes

essayez d'ajouter ceci

<div class="dropdown">
    <span tabindex="0">dropdown menu V</span>
    <div class="less-sticky">
        <ul>
          <li class="cb-item"><a href="http://yes.net">home page</a></li>
          <li class="cb-item"><a href="http://test.net">My home page</a></li>
          <li class="cb-item"><a href="#">Stay on this page</a></li>
          <li class="cb-item"><a href="#">Stay on this page</a></li>
          <li class="cb-item"><a href="#">Stay on this page</a></li>
          <li class="cb-item"><a href="#">Stay on this page</a></li>
          <li class="cb-item"><a href="#">Stay on this page</a></li>
          <li class="cb-item"><a href="#">Stay on this page</a></li>
          <li class="cb-item"><a href="#">fd gddsfgpage</a></li>
          <li class="cb-item"><a href="#">457567456756 757this page</a></li>
          <li class="cb-item"><a href="#">Stay on this page</a></li>
        </ul>
    </div>
</div>

le max-content donne la largeur de la largeur maximale de childs

/* ------------------------------------------ */
/* ----- combobox / dropdown list styling     */
/* ------------------------------------------ */

.less-sticky {
    border-radius: 10px;
    background-color: red !important;

    max-height: 200px;
    margin-top: 7px;
    background-color: rgb(255, 255, 255);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    z-index: 10;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    border-width: 0px 1px 1px;
    border-style: solid solid solid;
    border-color: rgb(220, 220, 220) rgb(220, 220, 220) rgb(220, 220, 220);
}

.dropdown {
    /* "relative" and "inline-block" (or just "block") are needed
     here so that "absolute" works correctly in children */
    position: relative;
    display: inline-block;
}

    .dropdown > *:last-child {
        /* Using `display:block` here has two desirable effects:
     (1) Accessibility: it lets input widgets in the dropdown to
         be selected with the tab key when the dropdown is closed. 
     (2) It lets the opacity transition work.
     But it also makes the contents visible, which is undesirable 
     before the list drops down. To compensate, use `opacity: 0`
     and disable mouse pointer events. Another side effect is that
     the user can select and copy the contents of the hidden list,
     but don't worry, the selected content is invisible. */
        display: block;
        opacity: 0;
        pointer-events: none;
        transition: 0.4s; /* fade out */
        position: absolute;
        left: 0;
        top: 100%;
        border: 1px solid #888;
        background-color: #fff;
        box-shadow: 1px 2px 4px 1px #666;
        box-shadow: 1px 2px 4px 1px #4448;
        z-index: 9999;
        min-width: 100%;
        box-sizing: border-box;
    }
    /* List of situations in which to show the dropdown list.
   - Focus dropdown or non-last child of it => show last-child
   - Focus .downarrow of combobox => show last-child
   - Stay open for focus in last child, unless .less-sticky
   - .sticky last child stays open on hover
   - .less-sticky stays open on hover, ignores focus in last-child */
    .dropdown:focus > *:last-child,
    .dropdown > *:focus ~ *:last-child,
    .dropdown > .less-sticky:last-child:hover {
        display: block;
        opacity: 1;
        transition: 0.15s;
        pointer-events: auto;
    }
/* detect Edge/IE and behave if though less-sticky is on for all
   dropdowns (otherwise links won't be clickable) */
@supports (-ms-ime-align:auto) {
    .dropdown > *:last-child:hover {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }
}
/* detect IE and do the same thing. */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .dropdown > *:last-child:hover {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }
}

.dropdown:not(.sticky) > *:not(:last-child):focus,
.dropdown:focus {
    pointer-events: none; /* Causes second click to close */
}

.downarrow:focus {
    outline: 2px solid #8BF; /* Edge/IE can't do outline transparency */
    outline: 2px solid #48F8;
}


/* ------------------------------------------ */
/* ----- Styling for examples                 */
/* ------------------------------------------ */

.cb-item {
    display: block;
    margin: 0px;
    padding: 2px;
    color: #000;
}

    .cb-item:hover, .cb-item:hover > a:visited {
        color: #fff;
        background-color: #88f;
    }


ul{
width: max-content;
margin:0;
padding:0;
}

ul{
width: max-content;
margin:0;
padding:0;
}

---

0 commentaires

---

0
votes

dans votre cas, vous devez tout d'abord définir l'ordre suivant: supprimer l'espace de remplissage gauche:

.dropdown > *:last-child {
 width: auto;
}

puis

.dropdown > *:last-child {
 min-width: 100%;
}

ajouter la largeur minimale à la largeur de l'élément spécifié puis vous devez ajuster le emballage déroulant: de

.cb-item {
    min-width: 200px;
 }

à

.less-sticky ul {
    padding-left:0;
}

de manière standard la largeur est automatique mais vous devez la définir dans l'ordre du navigateur croisé soutien. les conteneurs principaux doivent toujours contenir les codes généraux, alors supprimez la largeur minimale du conteneur principal, puis ajoutez-la à l'élément dont vous voulez que l'effet se produise, alors ajoutez-le à l'élément cb. il existe quelques différences mineures entre la largeur et la largeur minimale ou maximale, ce qui peut entraîner des erreurs. J'ai essayé votre code à l'intérieur du codepen afin que cela fonctionne bien, veuillez poser des questions si nécessaire. j'espère que cela a du sens.

---

1 commentaires

corrigez et ajustez également les agents utilisateurs, ils causeront quelques problèmes mineurs, changez le rembourrage du côté gauche ul à "0" il contient déjà une valeur de '40px' qui poussera les éléments lancés.

---

---

0
votes

Essayez ceci: https://jsfiddle.net/samjco/paxfv1jt/74/

CSS:

<div class="dropdown">
<div class="dd-box" tabindex="0">Select Status <span class="plus"> + </span></div>
    <div class="less-sticky">
        <ul>
          <li class="cb-item"><a class="cb-item-a" href="#">Open</a></li>
          <li class="cb-item"><a class="cb-item-a" href="#">Revised</a></li>
          <li class="cb-item"><a class="cb-item-a" href="#">In Review</a></li>
          <li class="cb-item"><a class="cb-item-a" href="#">Complete</a></li>
          <li class="cb-item"><a class="cb-item-a" href="#">Ready</a></li>
          <li class="cb-item"><a class="cb-item-a" href="#">Assigned</a></li>
          <li class="cb-item"><a class="cb-item-a" href="#">Working</a></li>

        </ul>
    </div>
</div>

HTML:

        .dd-box{
        border: 1px solid;
        padding: 10px 0 10px 8px;
        margin: 0 !important;
        border-radius: 3px;
        width: 182px !important;
        display: block;
        z-index: 10;
        cursor: pointer;

        }
        .plus{    
        float: right;
        margin-right: 14px;
        vertical-align: middle;
        }

        .less-sticky {
        border-radius: 0px 0px 3px 3px;
        margin-top: -2px;
        z-index: 0;
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown > *:last-child {
        display: block;
        opacity: 0;
        pointer-events: none;
        transition: 0.4s;
        position: absolute;
        left: 0;
        top: 100%;
        border: 1px solid #888;
        border-top: 0px;
        background-color: #fff;
        box-shadow: 2px 10px 10px -5px #4444444a;
        min-width: 100%;
        box-sizing: border-box;
        }

            .dropdown:focus > *:last-child,
            .dropdown > *:focus ~ *:last-child,
            .dropdown > .less-sticky:last-child:hover {
                display: block;
                opacity: 1;
                transition: 0.15s;
                pointer-events: auto;
            }

        @supports (-ms-ime-align:auto) {
            .dropdown > *:last-child:hover {
                display: block;
                opacity: 1;
                pointer-events: auto;
            }
        }
        /* detect IE and do the same thing. */
        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
            .dropdown > *:last-child:hover {
                display: block;
                opacity: 1;
                pointer-events: auto;
            }
        }

        .dropdown:not(.sticky) > *:not(:last-child):focus,
        .dropdown:focus {
            pointer-events: none; /* Causes second click to close */
        }

        .downarrow:focus {
            outline: 2px solid #8BF; 
            outline: 2px solid #48F8;
        }



        .cb-item {
        display: block;
        margin: 0px;
        color: #000;
        width: 190px;
        text-align: center;
        }
        a.cb-item {
        color: #000;
        }

            .cb-item:hover, .cb-item:hover > a:visited {
                color: #fff;
                background-color: #eee;
            }

            .cb-item-a{
              padding: 10px 20px;
        border-top: 1px solid;
        display: block;
            color: #000;
            text-decoration: none;
            }


        ul{
        width: max-content;
        margin:0;
        padding:0;
        }

---

0 commentaires

---

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO

---

Select2 ne s'affiche pas correctement dans le mode bootstrap

---

Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?

---

Comment puis-je définir un format pour les nombres d'entrée dans Blazor

---