তালিকার চিত্রের অবস্থানটি সামঞ্জস্য করবেন?

Question

তালিকা-শৈলী-চিত্রের অবস্থান সামঞ্জস্য করার কোনও উপায় আছে কি?

আমি যখন তালিকা আইটেমগুলির জন্য প্যাডিং ব্যবহার করি তখন চিত্রটি তার অবস্থানে থাকবে এবং প্যাডিংয়ের সাথে সরবে না ...

Comments

এটি সত্যই খুব খারাপ এটি এখনও সিএসএস অনুচ্ছেদে অন্তর্ভুক্ত নেই। কোন অবস্থানে list-style-imageযদি এটি অবস্থান করা যায় না? দেখে মনে হচ্ছে ফলস্বরূপ বেশিরভাগ লোকেরা তার পরিবর্তে ::beforeএবং এর মতো কাজের চাপ ব্যবহার করছে background-image।

— মানসিকবিদ

Answer 1

আসলে তা না. আপনার প্যাডিংটি সম্ভবত (সম্ভবত) তালিকার আইটেমটিতে প্রয়োগ করা হচ্ছে, সুতরাং কেবলমাত্র তালিকা আইটেমের মধ্যে থাকা আসল সামগ্রীকে প্রভাবিত করবে।

ব্যাকগ্রাউন্ড এবং প্যাডিং শৈলীর সংমিশ্রণ ব্যবহার করে এমন কিছু তৈরি করা যায় যা দেখতে দেখতে অনুরূপ উদাঃ

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;
}

আপনার বুলেটযুক্ত তালিকাগুলি আইটেমের অবস্থানের জন্য আপনি পিতামাতাদের তালিকা পাত্রে (উল) স্টাইলিং যুক্ত করতে খুঁজছেন, এই তালিকা সংস্থার নিবন্ধটিতে একটি ভাল সূচনা উল্লেখ রয়েছে।

Comments

এটি তালিকার স্টাইলটিকে সাধারণ তালিকা আইটেমের তুলনায় আরও কিছুটা ডানদিকে রাখবে, যা নীচে যদি সাধারণগুলি থাকে তবে কিছুটা "অফ" " আমি স্বাধীন সমাধান জানি না, তবে আপনার চিত্রের প্রস্থের উপর নির্ভর করে এটি উন্নতি করবে: "মার্জিন: 0 0 0 -7px;"

— ই-প্রেরণ

শীর্ষ অবস্থানের topজন্য, শীর্ষ প্যাডিংয়ের পরিবর্তে পরিবর্তিত মানটি আমার পক্ষে কাজ করে worked background: url(images/bullet.gif) no-repeat left 8px;

— শ্রীধর কটকম

আপনি সরাসরি তালিকা-স্টাইলটি স্টাইল করতে পারবেন না এটি একটি আসল লজ্জাজনক। এটি লোকেদেরকে সমস্ত ধরণের কাজের মতো করে তোলে। আমি সত্যিই এমন একটি তালিকার শৈলীর জন্য তালিকার শৈলীটি ব্যবহার করতে পছন্দ করব তবে আমি এটির মতো দেখতে চাই না।

— এমসিভি

Answer 2

আমি সাধারণত তালিকা-শৈলীর ধরণটি আড়াল করি এবং একটি পটভূমি চিত্র ব্যবহার করি যা চলনযোগ্য

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" হ'ল উপাদানটির অভ্যন্তরে পটভূমি চিত্রটি প্রান্তিক করে তোলে এবং প্যাডিংয়ের সাথেও আপেক্ষিক।

Answer 3

এই প্রশ্নের সম্ভাব্য সমাধান যা এখনও উল্লেখ করা হয়নি তা নিম্নলিখিত:

    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');
    }

নতুন বুলেটটি স্থান দেওয়ার আগে আপনি এখন লিটির উপরের / বাম ব্যবহার করতে পারেন। নোট করুন যে লি এর প্রস্থ এবং উচ্চতা: এর আগে আপনার পছন্দ হিসাবে পটভূমি চিত্রের একই মাত্রা হওয়া দরকার। এটি ইন্টারনেট এক্সপ্লোরার 8 এবং এর উপরে কাজ করে।

Comments

এটি আমার মতে সেরা সমাধান। যদি আপনি :: বামে সিউডো-এলিমেন্টের আগে ভাসিয়ে রাখেন তবে আপনি একই প্রভাব অর্জন করতে পারেন।

— টেলরম্যাক

Answer 4

আমার একই সমস্যা ছিল, তবে আমি পটভূমি বিকল্পটি ব্যবহার করতে পারি না (এবং একাধিক ব্যাকগ্রাউন্ড ব্যবহার করতে চাইনি) তাই আমি অন্য একটি সমাধানের কথা ভেবেছিলাম

এটি সক্রিয় / বর্তমান মেনু আইটেমটির জন্য সূচকগুলির মতো বর্গক্ষেত্রযুক্ত মেনুর উদাহরণ (ডিফল্ট তালিকার শৈলীর অন্য কোনও নিয়মে সেট করা নেই) for

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

}

এটি ": পূর্বে" সিউডো ক্লাস সহ একটি বর্গক্ষেত্রের অক্ষর ব্যবহার করে একটি বর্গ তৈরি করে এবং এটি নিখুঁত অবস্থান ব্যবহার করে অবাধে অবস্থানযোগ্য position

Answer 5

বাম দিকে এবং বর্ধিত লাইনের উচ্চতা সহ পাঠ্যের কেন্দ্রবিন্দুতে ছোট ধূসর ব্লকগুলি পেতে আমি যা করেছি তা এখানে:

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

আশা করি এটি কাউকে সহায়তা করবে: ডি

Answer 6

শেষ পর্যন্ত আমি যে সমাধানটি স্থির করেছিলাম তা হ'ল কিছু ফাঁক যোগ করার জন্য চিত্রটি নিজেই সংশোধন করা।

লি হিসাবে একটি ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করা প্রচুর ক্ষেত্রে কাজ করে তবে ব্যর্থ হয় যখন তালিকাটি ভাসমান চিত্রের পাশাপাশি ব্যবহার করা হয় (উদাহরণস্বরূপ চিত্রটির চারপাশে মোড়ানোর জন্য পাঠ্যটি পেতে)।

আশাকরি এটা সাহায্য করবে.

Answer 7

আপনি করতে পারেন অন্য বিকল্পটি হ'ল:

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

তালিকা ইমেজ অবস্থান করতে (0 3px) ব্যবহার করুন।

আইই 8 +, ক্রোম, ফায়ারফক্স এবং অপেরাতে কাজ করে।

আমি এই বিকল্পটি ব্যবহার করি কারণ আপনি সহজেই তালিকা-শৈলীটি সহজেই বদলাতে পারেন এবং একটি ভাল সুযোগ আপনার এমনকি কোনও চিত্র ব্যবহার নাও করতে পারে। (নীচে ভাজা)

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

হালনাগাদ:

এটি দ্বিতীয় লাইনে থাকা পাঠ্য / সামগ্রীর জন্য অ্যাকাউন্ট করবে:

ul{ 
    list-style-type:none;
}

li{
    position:relative;
}

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

প্যাডিং-বাম যুক্ত করুন: লিটিতে যদি আপনি বুলেট এবং সামগ্রীগুলির মধ্যে আরও স্থান চান।

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

Comments

আপডেট করা সংস্করণটি অতিরিক্ত লাইন জেএসফিডেলকে সম্বোধন করবে

— ম্যাকলিউড ওয়েবেডিভ

Answer 8

অথবা আপনি ব্যবহার করতে পারেন

list-style-position: inside;

Answer 9

আমি মনে করি আপনি যা করতে চান তা হ'ল প্যাডিং যুক্ত করুন (আপনি বর্তমানে <li> যোগ করছেন) <ul> ট্যাগটিতে এবং তারপরে বুলেট পয়েন্টগুলি <li> এর পাঠ্য সহ সরে যাবে।

এছাড়াও তালিকা-শৈলী-অবস্থান আপনি সন্ধান করতে পারে। এটি বুলেট চিত্রগুলির চারদিকে রেখাগুলি কীভাবে মোড়ানো তা প্রভাবিত করে।

Answer 10

"একটি ডারেন" উত্তর যেমন তবে ছোটখাট পরিবর্তন

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

এটি ক্রস ব্রাউজারে কাজ করে, কেবল প্যাডিং এবং মার্জিন সামঞ্জস্য করে

নেস্টেডদের জন্য সম্পাদনা করুন: উপ-নেস্টেড তালিকায় মার্জিন-বাম যোগ করতে এই স্টাইলটি যুক্ত করুন

উল উল {মার্জিন-বাম: 15px; }

Answer 11

আমি এই জাতীয় কিছু ব্যবহার করছি, আমার কাছে বেশ পরিষ্কার এবং সহজ বলে মনে হচ্ছে:

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আপনি যদি চান।

Answer 12

আমি গ্রহণযোগ্য উত্তরটি কিছুটা ফ্যাদ পেয়েছি, খুব অতিরিক্ত অতিরিক্ত প্যাডিং এবং সিএসএস কমান্ড সহ জাস্টল করতে হবে।

আমি ব্যক্তিগতভাবে আইটেমগুলি তালিকার জন্য প্যাডিং যোগ করি না, সাধারণত তাদের লাইন উচ্চতা নিয়ন্ত্রণ করে এবং মাঝে মাঝে মার্জিনই যথেষ্ট।

কাস্টম তালিকার শৈলীর চিত্রগুলির সাথে যখন আমার একটি প্রান্তিককরণ সমস্যা রয়েছে আমি প্রতিটি তালিকা লাইনের সাথে তার অবস্থানটি সামঞ্জস্য করতে যেদিকেই প্রয়োজন ঠিক তার পাশেই কেবল একটি পিক্সেল বা দুটি অতিরিক্ত জায়গা যুক্ত করি।

Comments

ক্রস ব্রাউজার রেন্ডারিংয়ের সাথে আপনাকে কখনই ডিল করতে হয়নি, তাই না?

— ভোলকার ই।

Answer 13

ফন্টউইউজ সহ সমাধান

#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;}

Answer 14

ডিফল্ট বুলেট চিত্রটি লুকান এবং 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>

Answer 15

My solution:

ul {
    line-height: 1.3 !important;
    li {
        font-size: x-large;
        position: relative;
        &:before {
            content: '';
            display: block;
            position: absolute;
            top: 5px;
            left: -25px;
            height: 23px;
            width: 23px;
            background-image: url(../img/list-char.png) !important;
            background-size: 23px;
            background-repeat: no-repeat;
        }
    }
}