CSS3 Kind-Elemente Breite Nicht Respektiert Übergeordnete Container-Breite

Ich bin versucht, um meine ul-und li-Elemente, die innerhalb eines div-respektieren Sie die div-Breite mit margin-left: auto. Ich bin auch nicht wollen, ul/li zu verlängern, von den div. Ich will die ul und li Elemente der Aufenthalt in den div-container. Von was ich gelesen habe, ist dieser code richtig ist, weil ich die Kind-Elemente enthalten eine Breite, die sollte entsprechend die div-Breite.

#phonequeue {
    display: block;
    width: 400px;
    height: 800px;
    border-width: 5px;
    border-color: white;
    border-style: solid;
    float: right;
    margin-top: -650px;
}

li {
    display: block;
    padding: 15px;
    text-align: left;
    height: 1.2 em
    padding-left: 15px;
    padding-right: 15px;
    margin: 0px 0px 4px 0px;
    background-color #555
    -webkit-border-radius: 15px;
    border-radius: 40px;
    background: -webkit-gradient(linear, 0% 0%, 0% 30%, from(#444), to(#111));
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 22px;
    width: 100%;
    margin: auto;

}

ul {
    list-style-type: none;
    width: 100%;
    margin: auto;
}

index.html:

    <div id="phonequeue"> 
    <ul>
        <li class="avail">
        <span class="pname">John Doe</span>
        <span class="ptime">03:00</span>
        </li>
    </ul>
    </div>

UPDATE: Hier ist ein funktionierendes Beispiel. Die element-Breite von 430px; wenn der übergeordnete div-Element 400px;. Ich würde die child-Elemente zu zentrieren, sich im div und Ihre Breite respektieren die Eltern der Breite. http://jsfiddle.net/FBvQJ/4/

Wie ich bin nicht in der Lage zu replizieren, einige Blick auf den code in Frage - es ist nicht klar, was Sie eigentlich sind bis zu... (...Haben Sie versucht, zu entfernen width:100%; aus Ihrem LI-Elemente?)
Dies ist es, was ich mit deinem code. Bitte geben Sie den code, der hat ein Problem, zu erklären, wo das Problem liegt, und was für ein problem du hast
Ok....getan. bitte siehe update.
text-align:center;?
Sorry, Tippfehler....das element ul/li-Elemente sind 438px und nicht zentriert in den übergeordneten div, dass ist 400px;.
Die "extra" - Breite ist wohl aus der Polsterung. Dies kann gelöst werden, indem die boxx-sizing:border-box beheben.

InformationsquelleAutor dman | 2013-10-08

Ich glaube das problem wurde mit der Verwendung von width: 100%

Überprüfen Sie diese jsFiddle und lassen Sie mich wissen, ob dies Ihre Frage beantwortet.

Dies ist die aktualisierte CSS zu lösen, die überlappende Breite:

phonequeue {
    display: block;
    width: 200px;
    border: 1pt solid green;
}
ul{
    border: 1pt solid red;
    list-style-type: none;
    margin: auto;
    padding: 0;
}
li {
    display: block;
    padding: 15px;
    text-align: left;
    height: 1.2em;
    margin: 0px 0px 4px 0px;
    -webkit-border-radius: 15px;
    font-size: 22px;
    margin: auto;
    border: 1pt solid #ccc;
}

Ich glaube nicht, dass Sie brauchen, um zu definieren, die in voller Breite für jedes element.

InformationsquelleAutor GMadez

1

Wenn Sie möchten, den text, zentriert im DIV, entfernen Sie die Breite auf den LI-tag und stellen am Rand:
```
margin: 0px auto 4px auto;
```
Wird, zentrieren Sie den text innerhalb der div.
- Ich entfernte die Breite in beide ul-und li wich aus gehalten aus, das sich bis über die div. Es ist jedoch margin: auto ist noch nicht so dass es zur Mitte horizontal nach dem übergeordneten div die Breite. Ein wenig verwirrt, da ich gelesen habe, wo muss ich geben Sie die Breite in Kinder, um Sie zu füllen, div Breite und zentrieren sich selbst.
- Sie haben gesagt, die <li>'s zu display:block. Dieses sorgt automatisch dafür, dass Sie die volle Breite der Eltern.
- Cool. Ich kann immer noch nicht bekommen, es zu zentrieren, aber. die ul>li schwimmt auf der rechten Seite des übergeordneten div.
- Ich denke, das ist nur die UL, die Polsterung schieben Sie es über.
- Ändern Sie die Anzeige auf display: inline;
InformationsquelleAutor AE Grey
1

Wenn ich verstehen deine Frage richtig (was zweifelhaft ist) ich glaube, dass Sie erreichen können, die Zentrierung, die Sie benötigen, indem man den 100% - breiten und die Verwendung von text-align:center:
```
li {
    display: block;
    padding: 15px;
    text-align: left;
    height: 1.2 em;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0px auto 4px auto;
    background-color #555;
    -webkit-border-radius: 15px;
    border-radius: 40px;
    background: -webkit-gradient(linear, 0% 0%, 0% 30%, from(#444), to(#111));
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 22px;
    text-align:center; /* < this (or not, if you don't actually want it centred after all) */
}

ul {
    list-style-type: none;
    padding:0; /* < and this */
    margin: 0;
}
```
Demo-fiddle

Später, wenn Sie entscheiden, dass Sie möchten, dass die Zeit über den richtigen Einsatz
```
.ptime {float:right;} 
```
Beispiel
- Was ist, wenn ich nicht wollen, dass der text ausgerichtet-center? Ich möchte den Namen auf der linken Seite.
- nehmen Sie die text-align:center bisschen natürlich 😉 jsfiddle.net/FBvQJ/8
- Eigentlich war es die padding: 0 im ul {}, die Feste diesem. Für Lern Zwecke, warum ist das so?
- Einige box-Modelle sind mit der Polsterung in der Größe insgesamt, einige nicht. Siehe hier. box-sizing: border-box ist dein Freund
InformationsquelleAutor Moob

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.