ปรับตำแหน่งรูปภาพของรายการหรือไม่

มีวิธีการปรับตำแหน่งของ list-style-image หรือไม่?

เมื่อฉันใช้ช่องว่างสำหรับรายการในรายการรูปภาพจะยังคงอยู่ที่ตำแหน่งและจะไม่เคลื่อนที่เมื่อมีช่องว่างภายใน ...

ไม่ได้จริงๆ ช่องว่างภายในของคุณคือ (อาจ) ถูกนำไปใช้กับรายการในรายการดังนั้นจะมีผลกับเนื้อหาจริงภายในรายการเท่านั้น

การใช้การผสมผสานระหว่างพื้นหลังและสไตล์การบุรองสามารถสร้างสิ่งที่มีลักษณะคล้ายกันเช่น

li {
  background: url(images/bullet.gif) no-repeat left top; /* <-- change `left` & `top` too for extra control */
  padding: 3px 0px 3px 10px;
  /* reset styles (optional): */
  list-style: none;
  margin: 0;
}

คุณอาจต้องการเพิ่มสไตล์ให้กับคอนเทนเนอร์ลิสต์หลัก (ul) เพื่อจัดวางไอเท็มหัวข้อย่อยของคุณบทความ A List Apart นี้มีการอ้างอิงเริ่มต้นที่ดี

ปกติฉันจะซ่อน list-style-type และใช้ภาพพื้นหลังซึ่งเคลื่อนย้ายได้

li 
{
    background: url(/Images/arrow_icon.gif) no-repeat 7px 7px transparent;
    list-style-type: none;
    margin: 0;
    padding: 0px 0px 1px 24px;
    vertical-align: middle;
}

"7px 7px" คือสิ่งที่จัดแนวภาพพื้นหลังภายในองค์ประกอบและยังสัมพันธ์กับการขยาย

ทางออกที่เป็นไปได้สำหรับคำถามนี้ที่ยังไม่ได้กล่าวถึงมีดังต่อไปนี้:

    li {
        position: relative;
        list-style-type: none;
    }

    li:before {
        content: "";
        position: absolute;
        top: 8px;
        left: -16px;
        width: 8px;
        height: 8px;
        background-image: url('your-bullet.png');
    }

ตอนนี้คุณสามารถใช้ด้านบน / ซ้ายของ li: ก่อนที่จะวางกระสุนใหม่ โปรดทราบว่าความกว้างและความสูงของ li: ก่อนที่จะต้องมีขนาดเท่ากับภาพพื้นหลังที่คุณเลือก สิ่งนี้ใช้ได้ใน Internet Explorer 8 ขึ้นไป

ฉันมีปัญหาเดียวกัน แต่ฉันไม่สามารถใช้ตัวเลือกพื้นหลัง (และไม่ต้องการใช้พื้นหลังหลาย ๆ แบบ) ดังนั้นฉันจึงคิดถึงวิธีแก้ไขปัญหาอื่น

นี่คือตัวอย่างสำหรับเมนูที่มีตัวบ่งชี้คล้ายสี่เหลี่ยมจัตุรัสสำหรับรายการเมนูที่ใช้งาน / ปัจจุบัน (สไตล์รายการเริ่มต้นถูกตั้งค่าเป็นไม่มีในกฎอื่น)

nav ul li.active>a:before{
    content: "■";
    position: absolute;
    top: -22px;
    left: 55px;
    font-size: 33px;

}

มันสร้างสแควร์โดยใช้ตัวละครสแควร์กับ ": ก่อน" ชั้นเรียนเทียมและมันสามารถวางตำแหน่งได้อย่างอิสระโดยใช้การวางตำแหน่งที่แน่นอน

นี่คือสิ่งที่ฉันทำเพื่อให้มีบล็อกสีเทาเล็ก ๆ อยู่ทางด้านซ้ายและอยู่ตรงกลางของข้อความด้วยความสูงที่เพิ่มขึ้น:

line-height:200%;
padding-left:13px;
background-image:url('images/greyblock.gif');
background-repeat:no-repeat;
background-position:left center;

หวังว่านี่จะช่วยใครซักคน: D

ทางออกที่ฉันตัดสินในที่สุดคือการปรับเปลี่ยนภาพเพื่อเพิ่มระยะห่าง

การใช้ภาพพื้นหลังบน li เป็นคำแนะนำบางอย่างทำงานได้ในหลายกรณี แต่ล้มเหลวเมื่อใช้รายการข้างๆภาพลอย (ตัวอย่างเช่นเพื่อให้ข้อความล้อมรอบรูปภาพ)

หวังว่านี่จะช่วยได้

ตัวเลือกอื่นที่คุณสามารถทำได้คือ:

li:before{
    content:'';
    padding: 0 0 0 25px;
    background:url(../includes/images/layouts/featured-list-arrow.png) no-repeat 0 3px;
}

ใช้ (0 3px) เพื่อจัดตำแหน่งอิมเมจลิสต์

ใช้งานได้ใน IE8 +, Chrome, Firefox และ Opera

ฉันใช้ตัวเลือกนี้เพราะคุณสามารถสลับรายการสไตล์ได้อย่างง่ายดายและเป็นโอกาสที่ดีที่คุณอาจไม่ต้องใช้รูปภาพเลย (ซอด้านล่าง)

http://jsfiddle.net/flashminddesign/cYAzV/1/

UPDATE:

สิ่งนี้จะอธิบายถึงข้อความ / เนื้อหาที่เข้าสู่บรรทัดที่สอง:

ul{ 
    list-style-type:none;
}

li{
    position:relative;
}

ul li:before{
    content:'>';
    padding:0 10px 0 0;
    position:absolute;
    top:0; left:-10px;
}

เพิ่ม padding-left: ไปที่ li หากคุณต้องการเว้นวรรคระหว่างสัญลักษณ์แสดงหัวข้อย่อยและเนื้อหา

http://jsfiddle.net/McLeodWebDev/wfzwm0zy/

หรือคุณสามารถใช้

list-style-position: inside;

ฉันคิดว่าสิ่งที่คุณต้องการจะทำคือการเพิ่มการเติม (คุณกำลังเพิ่มให้กับ <li>) ไปยังแท็ก <ul> จากนั้นจุดกระสุนจะเคลื่อนที่ไปพร้อมกับข้อความของ <li>

นอกจากนี้ยังมีตำแหน่งแบบรายการที่คุณสามารถตรวจสอบได้ มันมีผลต่อการที่เส้นล้อมรอบภาพกระสุน

เช่นคำตอบ "a darren" แต่มีการดัดแปลงเล็กน้อย

li 
{
background: url("images/bullet.gif") left center no-repeat;
padding-left: 14px;
margin-left: 24px;
}

มันทำงานข้ามเบราว์เซอร์เพียงปรับ padding และระยะขอบ

แก้ไขเพื่อซ้อน: เพิ่มสไตล์นี้เพื่อเพิ่มระยะขอบซ้ายไปยังรายการที่ซ้อนกัน

ul ul {margin-left: 15px; }

ฉันกำลังใช้สิ่งนี้ดูเหมือนสะอาดและเรียบง่ายสำหรับฉัน:

ul { 
     list-style:  none;
     /* remove left padding, it's usually unwanted: */
     padding:  0;
}

li:before {
     content:  url(icon.png);
     display:  inline-block;
     vertical-align:  middle;

     /* If you want some space between icon and text: */
     margin-right:   1em;
}

รหัสข้างต้นใช้งานได้ตามปกติในกรณีส่วนใหญ่ของฉัน
สำหรับการปรับที่แน่นอนคุณสามารถแก้ไขvertical-alignเช่น:

vertical-align:  top;

/* or */
vertical-align:  -10px;

/* or whatever you need instead of "middle" */

คุณอาจจะตั้งlist-style: noneอยู่บนliแทนulถ้าคุณชอบ

ฉันพบคำตอบที่ได้รับการยอมรับเล็กน้อยจากความเหลวไหลมากเกินไปเช่นกันโดยต้องใช้คำสั่ง padding และ css

ฉันไม่เพิ่ม padding ในรายการส่วนตัวเป็นการควบคุมความสูงของบรรทัดและระยะขอบก็เพียงพอ

เมื่อฉันมีปัญหาการจัดตำแหน่งด้วยภาพสไตล์รายการที่กำหนดเองฉันเพียงแค่เพิ่มพิกเซลหนึ่งหรือสองของพื้นที่พิเศษรอบ ๆ สิ่งที่จำเป็นต้องปรับตำแหน่งของมันเมื่อเทียบกับแต่ละบรรทัดรายการ

วิธีแก้ปัญหาด้วย fontawesome

#polyNedir ul li { position:relative;padding-left:20px }
#polyNedir ul li:after{font-family:fontawesome;content:'\f111';position:absolute;left:0px;top:3px;color:#fff;font-size:10px;}

ซ่อนภาพสัญลักษณ์เริ่มต้นและใช้background-imageเนื่องจากคุณสามารถควบคุมได้มากขึ้นเช่น

li {
    background-image: url(https://material.io/tools/icons/static/icons/baseline-add-24px.svg);
    background-repeat: no-repeat;
    background-position: left 50%;
    padding-left: 2em;
}

ul {
    list-style: none;
}

<ul>
<li>foo</li>
<li>bar</li>
</ul>