เหตุใดฉันจึงไม่สามารถจัดระยะขอบ: 0 อัตโนมัติได้

130

ฉันมี#headerdiv ที่อยู่100% widthภายใน div นั้นฉันมีรายการที่ไม่เรียงลำดับ ฉันได้นำไปใช้margin: 0 autoกับรายการที่ไม่เรียงลำดับ แต่จะไม่อยู่กึ่งกลางภายใน div ส่วนหัว

ใครช่วยบอกฉันทีว่าทำไม? ผมคิดว่าถ้าผมกำหนดความกว้างของ div margin: 0 autoแม่แล้วรายการเรียงลำดับควรจะสามารถไปยังศูนย์ตัวเองด้วย ฉันขาดอะไรไป?

นี่คือรหัสของฉัน:

<style>

* {
    margin: 0;
    padding: 0;
}

#header {
    width: 100%;    
    background-color: #333;
    min-height: 160px;
    font-family:Arial, Helvetica, sans-serif;
}

#sitename {
    font-size: 50px;
    width: 620px;
    margin:0 auto;
    padding-top: 35px;
    color:#999;
}

#header ul {
    float: right;
    margin: 0 auto;
}

#header ul li {
    float: left;
    padding-right: 20px;
    list-style-type: none;
    font-size: 20px;
}

</style>

</head>

<body>

<div id="header">
    <h1 id="sitename">Photography Auction Site</h1>

    <ul>
        <li>List of Photos</li>
        <li>Image Gallery</li>
        <li>Contact Us</li>
    </ul>
</div>

</body>
</html>

html css margin

— zeckdude
แหล่งที่มา

สิ่งที่เบราว์เซอร์ที่คุณใช้? IE / Win มีปัญหากับ Margin auto

— JD Frias

ทำไมคุณถึงลอยยูลไปทางขวาด้วย? เอามันออกและอาจจะลอยด้วย: ทิ้งไว้ให้คนโกหกแล้วคุณจะสบายดี

— Simon

1

ฉันกำลังสร้างแถบนำทาง ฉันเอาลูกลอยออกไปทางขวาสำหรับ ul และใส่ลูกลอยไปทางซ้ายสำหรับ li แต่ตอนนี้ทำให้ทุกอย่างอยู่ทางซ้าย

— zeckdude

135

คุณต้องกำหนดความกว้างขององค์ประกอบที่คุณอยู่ตรงกลางไม่ใช่องค์ประกอบหลัก

#header ul {
    margin: 0 auto;
    width: 90%;
}

แก้ไข : ตกลงฉันเห็นหน้าทดสอบแล้วและนี่คือวิธีที่ฉันคิดว่าคุณต้องการ:

#header ul {
    list-style:none;
    margin:0 auto;
    width:90%;
}

/* Remove the float: left; property, it interferes with display: inline and 
 * causes problems. (float: left; makes the element implicitly a block-level
 * element. It is still good to use display: inline on it to overcome a bug
 * in IE6 and below that doubles horizontal margins for floated elements)
 * The styles below is the full style for the list-items. 
 */
#header ul li {
    color:#CCCCCC;
    display:inline;
    font-size:20px;
    padding-right:20px;
}

— PatrikAkerstrand
แหล่งที่มา

2

จะเกิดอะไรขึ้นถ้าความกว้างของ ul เป็นแบบไดนามิก ฉันกำลังคิดที่จะใส่ข้อความที่แตกต่างกันแบบไดนามิกใน Li ด้วย PHP ในภายหลังดังนั้นฉันจึงพยายามคาดการณ์สิ่งนั้น

— zeckdude

2

ใช่แล้วคุณไม่สามารถจัดกึ่งกลางโดยใช้ margin: auto;

— PatrikAkerstrand

1

ฉันลองคำแนะนำล่าสุดของคุณแล้ว แต่ไม่ได้ผล ฉันได้อัปโหลดเวอร์ชันใหม่ล่าสุดพร้อมคำแนะนำของคุณไปยังตำแหน่งเดียวกันเพื่อให้คุณเห็นสิ่งที่ฉันกำลังประสบอยู่ แผลพุพองจะถูกผลักไปทางขวาประมาณ 50px

— zeckdude

1

อย่างที่ฉันพูดในข้อเสนอแนะของฉันให้ลบลูกลอยออก: ซ้าย

— PatrikAkerstrand

1

มันได้ผลดีมาก! ขอบคุณมาก ๆ ที่ติดตามและช่วยเหลือฉัน! ปัญหานั้นกำลังฆ่าฉัน! ขอบคุณอีกครั้ง!

— zeckdude

44

อินไลน์บล็อกครอบคลุมทั้งบรรทัด (จากซ้ายไปขวา) ดังนั้นระยะขอบซ้ายและ / หรือขวาจะไม่ทำงานที่นี่ สิ่งที่คุณต้องการคือบล็อกบล็อกมีขอบด้านซ้ายและด้านขวาดังนั้นจึงอาจได้รับอิทธิพลจากระยะขอบ

นี่คือวิธีการทำงานสำหรับฉัน:

#content {
display: block;
margin: 0 auto;
}

— Hoeks
แหล่งที่มา

ขอบคุณสำหรับคำแนะนำที่เป็นประโยชน์มากฉันมีปัญหาเดียวกันกับองค์ประกอบแบบอินไลน์และฉันคิดไม่ออกว่าทำไมมันถึงใช้งานไม่ได้

— mastazi

นี่คือคำตอบที่ดีที่สุดและใช้ได้กับหน้าต่างหลายขนาด

— ยุดาปวีรา

14

ทำไมจะไม่ล่ะ?

#header {
    text-align: center;
}

#header ul {
    display: inline;
}

— kalys.osmonov
แหล่งที่มา

ฉันเพิ่ม text-align: left; ไปที่ #header ul เพื่อจัดตำแหน่ง ul ให้อยู่ตรงกลางและจัดข้อความใน li ให้ชิดซ้าย ฉันต้องตั้งค่า ul ให้แสดงเป็นอินไลน์บล็อกเพื่อให้ความกว้างเป็นแบบไดนามิก (อัตโนมัติ)

— Brent Self

3

ผมไม่ทราบว่าทำไมคำตอบแรกที่ดีที่สุดหนึ่งผมพยายามมันและไม่ได้ทำงานในความเป็นจริงเป็น @ kalys.osmonov กล่าวว่าคุณสามารถให้text-align:centerไปheaderแต่คุณจะต้องทำให้ulเป็นinline-blockมากกว่าinlineและยังให้คุณต้องแจ้งให้ทราบล่วงหน้า ที่text-alignสามารถสืบทอดซึ่งไม่เป็นผลดีในระดับหนึ่งดังนั้นวิธีที่ดีกว่า (ไม่ได้ทำงานด้านล่าง IE 9) ใช้และmargin transformเพียงแค่ลบfloat rightและmargin;0 autoจากulเช่นด้านล่าง:

#header ul {
   /* float: right; */
   /* margin: 0 auto; */
   display: inline-block;
   margin-left: 50%; /* From parent width */
   transform: translateX(-50%); /* use self width which can be unknown */
  -ms-transform: translateX(-50%); /* For IE9 */
}

วิธีนี้สามารถแก้ไขปัญหาที่ทำให้ความกว้างของulศูนย์กลางแบบไดนามิกหากคุณไม่สนใจ IE8 เป็นต้น

— บิล dou
แหล่งที่มา

0

เราสามารถกำหนดความกว้างของแท็ก ul จากนั้นมันจะจัดกึ่งกลาง

#header ul {
    display: block;
    margin: 0 auto;
    width: 420px;
    max-width: 100%;
}

— วานีเอส
แหล่งที่มา