Satz div Breite ul Liste Größe

Question

Ich habe:

<div class="div1"> 
    <ul> 
     <li><input type="button" value="val1"></li> 
     <li ><input type="button" value="val2"></li> 
     <li ><input type="button" value="val2"></li> 
     <li ><input type="button" value="val2"></li> 
     <li ><input type="button" value="val2"></li> 
     <li ><input type="button" value="val2"></li> 
     <li ><input type="button" value="val2"></li> 
     <li ><input type="button" value="val2"></li> 
    </ul> 
</div> 

CSS:

.div1{ 
    position:absolute; 
    height:30px; 
    width:auto; 
    top:50%; 
    margin-top:-15px; 
    left:50%; 
    transform:translate(-50%); 
    border:1px solid #f7f7f7; 
    display: inline-block; //inline 
} 
.ul li{ 
    margin-right:5px; 
    box-shadow: 2px 3px 3px #666666; 
    border-radius: 2px; 
} 

ich die Breite div1 wollen einfach bezogen auf die Menge von li Größe zu verlängern (FYI: li Menge ist zufällig).

Wenn ich div width: 100px // or something setze, dann li überläuft den Div-Container. und wenn ich versuche, div width: auto immer noch das gleiche zu setzen.

Auch bemerkte ich eine Sache in meinem Browser-Modus überprüfen, dass, wenn ich links entfernen: 50% dann ganz gut es funktioniert, aber die Position der Box kommen, um nach links und ich brauche das Element

zentrierte zu halten Alle Antworten werden sehr geschätzt :)

Answer 1

Einfach Höhe und Breite von div1 entfernen. Sie werden Standardwerte haben. Und setzen Sie nicht Punkt . vor ul-Selektor in der CSS-Regel. ul ist Element, nicht Klasse.

.div1{ 
 
    position:absolute; 
 
    top:50%; 
 
    margin-top:-15px; 
 
    left:50%; 
 
    transform:translate(-50%); 
 
    border: 1px solid #f70000; 
 
    display: inline-block; //inline 
 
} 
 
ul li{ 
 
    margin-right:5px; 
 
    box-shadow: 2px 3px 3px #666666; 
 
    border-radius: 2px; 
 
}

<div class="div1"> 
 
    <ul> 
 
     <li><input type="button" value="val1"></li> 
 
     <li ><input type="button" value="val2"></li> 
 
     <li ><input type="button" value="val2"></li> 
 
     <li ><input type="button" value="val2"></li> 
 
     <li ><input type="button" value="val2"></li> 
 
     <li ><input type="button" value="val2"></li> 
 
     <li ><input type="button" value="val2"></li> 
 
     <li ><input type="button" value="val2"></li> 
 
    </ul> 
 
</div>

Answer 2

ich weiß nicht, ob ich die Frage verstanden, aber wenn ich die Höhe auf auto gesetzt, nicht 30px gab es keinen Überlauf, wenn ich es zumindest getestet

.div1{ 
    position:absolute; 
    height:auto; // CHANGED THIS LINE 
    width:auto; 
    top:50%; 
    margin-top:-15px; 
    left:50%; 
    transform:translate(-50%); 
    border:1px solid #f7f7f7; 
    display: inline-block; //inline 
} 

Answer 3

1) Haben Sie versucht, nicht setzen width Attribut? Oder Sie können einfach min-width angeben, wenn Sie mindestens eine Größe von div benötigen.

Hinweis: inline-block sollte Breite ihres Inhalts nehmen

2) Ich bin nicht sicher, aber Ihre li s eigentlich nicht so viel verwenden, Breite und wenn Sie viel mehr von ihnen hinzufügen, sollten sie erweitern offensichtlich die height von die div, so sollten Sie wahrscheinlich min-height Eigenschaft verwenden oder keine height angeben.

<div class="div1"> 
    <ul> 
     <li><input type="button" value="val1"></li> 
     <li ><input type="button" value="val2"></li> 
     <li ><input type="button" value="val2"></li> 
     <li ><input type="button" value="val2"></li> 
     <li ><input type="button" value="val2"></li> 
     <li ><input type="button" value="val2"></li> 
     <li ><input type="button" value="val2"></li> 
     <li ><input type="button" value="val2"></li> 
    </ul> 
</div> 

Answer 4

Sie wissen nicht wirklich, warum Aber ich, dass das Problem in translate() um so war gerade herausgefunden meine div Container zentriert zu halten und die Breite der Box auf Auto zu verlängern.

Eine einfache und saubere Art und Weise:

.div1{ 
    margin: 30px auto; 
    border: 1px solid #f7f7f7; 
    display: table; 
} 

Wie es heißt: ein Bogen zwei kills (sauber und schnell)