আমি কীভাবে তালিকার আইটেমগুলির মধ্যে উল্লম্ব স্থান নির্ধারণ করব?

Question

ইতোমধ্যে <ul> উপাদানের মধ্যে, স্পষ্টভাবে লাইনগুলির মধ্যে উল্লম্ব ব্যবধানটি লাইন-উচ্চতার বৈশিষ্ট্যের সাথে ফর্ম্যাট করা যায়।

আমার প্রশ্ন হ'ল একটি <ul>উপাদানটির মধ্যে আমি কীভাবে তালিকার আইটেমগুলির মধ্যে উল্লম্ব ব্যবধান সেট করব?

Comments

ul li { margin: ???; padding: ???; line-height: ???; }সমস্ত বা CSS সিএসএসের কয়েকটি বৈশিষ্ট্য।

— ব্র্যাড ক্রিস্টি

Answer 1

আপনি মার্জিন ব্যবহার করতে পারেন। উদাহরণ দেখুন:

http://jsfiddle.net/LthgY/

li{
  margin: 10px 0;
}

Comments

বিশেষত, liউপাদানের উপর মার্জিন ব্যবহার করুন ul।

— দুআনেভ

Answer 2

এইচটিএমএল

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

সিএসএস

li:not(:last-child) {
    margin-bottom: 5px;
}

সম্পাদনা: আপনি যদি শেষ লি উপাদানটির জন্য বিশেষ কেসটি ব্যবহার না করেন তবে আপনার তালিকার পরে একটি ছোট ফাঁক থাকবে যা আপনি এখানে দেখতে পারেন: http://jsfiddle.net/wQYw7/

এখন আমার সমাধানের সাথে এটি তুলনা করুন: http://jsfiddle.net/wQYw7/1/

নিশ্চিত যে এটি পুরানো ব্রাউজারগুলিতে কাজ করে না তবে আপনি সহজেই জেএস এক্সটেনশনগুলি ব্যবহার করতে পারেন যা এটি পুরানো ব্রাউজারগুলির জন্য সক্ষম করে enable

Comments

ওয়েব ডেভেলপার / কোডার হিসাবে আমাদের কাজের লেন অংশটি এমন সমাধান প্রদান করা যা যতটা সম্ভব পরিবেশে কাজ করবে। আপনার উত্তর জিজ্ঞাসা করা প্রশ্নের জন্য সত্যিই overkill।

— disinfor

আমি তাই মনে করি না. আপনি যে পরিবেশটিকে টার্গেট করতে চান তার জন্য কেবলমাত্র একটি সমাধান সরবরাহ করুন, আপনি প্রসারণের পরিকল্পনা না নিলে সমস্ত কিছু ওভারকিল হবে। প্লাস সমস্ত উত্তরগুলির প্রথম এবং শেষ তালিকা তালিকার আগে এবং / বা পরে স্থান যুক্ত করার অসুবিধা রয়েছে। কোনটিই প্রশ্ন ছিল না, তিনি তালিকার উপাদানগুলির মধ্যে কেবল একটি ফাঁকা জায়গা রাখতে চেয়েছিলেন (কমপক্ষে তিনি এটি লিখেছিলেন)। অন্যান্য উত্তরের শেষ উপাদানটির পরে একটি ব্যবধান থাকবে যদিও নিম্নলিখিত লি উপাদান নেই।

তিনি যে পরিবেশের সাথে কাজ করছেন তা হ'ল ওয়েব ব্রাউজার। এটি সর্বত্র কাজ করে এমন কোনও সমাধানের পরামর্শ দেওয়ার জন্য ওভারকিল নয়। এছাড়াও, আপনি যদি শেষ আইটেমের মার্জিন সম্পর্কে সত্যিই উদ্বিগ্ন হন তবে আপনি এমন কোনও সমাধানের পরামর্শ দেবেন না যার সমাধানের জন্য জেএস প্রয়োজন। আপনি ব্যবহার করতে পারেন :first-childএবং এটি আই

— ডিসিঙ্ক

@ ডিসিসিনের জন্য আমি সমস্ত কিছু লক্ষ্যবস্তু করার বিষয়ে একমত নই। ওয়েব বিকাশের চাপের অংশটি সমর্থনকারী ব্রাউজারগুলি থেকে আসে যা আমাদের সমর্থন করে না। সাফারি তাদের মধ্যে অন্যতম। আমাদের ইন্টারনেট, মিডিয়াম . com / @richtr/ … ধরে থাকা ব্রাউজারগুলিতে দাঁড়াতে হবে । আমাদের ওয়েব পৃষ্ঠাগুলিতে "আমরা আপনার ব্রাউজারকে সমর্থন করি না" বিজ্ঞপ্তিগুলি এটিকে সর্বত্র কাজ করার জন্য নরকে যেতে হবে না এমন ফিরিয়ে আনা উচিত। এবং আমাদের জানাতে হবে এবং ক্লায়েন্টদের কাছেও দাঁড়াতে হবে। অথবা আমরা কিছুই করতে পারি না এবং দুর্দান্ত ফ্লোর ম্যাট হতে পারি।

— 1.21 গিগাওয়াটস

@ 1.21gigawatts "আমাদের ওয়েব পৃষ্ঠাগুলিতে" আমরা আপনার ব্রাউজারকে সমর্থন করি না "" এমএইচএম, ফিরিয়ে আনতে হবে no একে প্রতিযোগিতার নাশকতা বলা হয় এবং একাধিক দেশে এটি অবৈধ। মাইক্রোসফ্ট ওয়েবে স্কাইপ দিয়ে তা করেছে। ওয়েবের জন্য স্কাইপ এখনও অন্য ব্রাউজারগুলিতে পুরোপুরি কাজ করে। গুগল এক বছরেরও বেশি সময় ধরে সাফারিতে ইউটিউব ত্রুটি করেছে। গুগল টর ব্যবহারকারীদের কিছু নির্দিষ্ট পরিষেবা ব্যবহার করা থেকে বিরত রাখে। নির্দিষ্ট প্ল্যাটফর্মগুলিকে অবরুদ্ধ না করে যেমন অ্যাপ্লিকেশন এবং পরিষেবাগুলিকে প্ল্যাটফর্ম-স্বতন্ত্র করতে "ওয়েব প্ল্যাটফর্ম" এর বিন্দু নয়? যদি আপনি এটি করতে চান, তবে এর পরিবর্তে দেশীয় প্রোগ্রামগুলি তৈরি করবেন না কেন? শেষ পর্যন্ত তারা আরও শক্তিশালী।

— আন্দ্রেয়াস

Answer 3

আমি এতে ঝুঁকতে চাই যা আই 8 সাপোর্টের গুণাবলীযুক্ত।

li{
    margin-top: 10px;
    border:1px solid grey;
}

li:first-child {
    margin-top:0;
}

JSFiddle

Answer 4

marginআপনার liট্যাগগুলিতে একটি যুক্ত করুন । এটি আপনার মধ্যে স্থান তৈরি করবে liএবং আপনি ট্যাগগুলির line-heightমধ্যে পাঠ্যকে ফাঁক করে সেট করতে ব্যবহার করতে পারেন li।

Answer 5

এইচটিএমএল ইমেল বিস্ফোরণগুলি তৈরি করার সময় আপনি স্টাইল শীট বা স্টাইল / স্টাইল ব্লক ব্যবহার করতে পারবেন না। সমস্ত সিএসএসের ইনলাইন হওয়া দরকার। যে ক্ষেত্রে আপনি বুলেটগুলির মধ্যে ব্যবধানটি সামঞ্জস্য করতে চান আমি ল স্টাইল ব্যবহার করি = "মার্জিন-নীচে: 8px;" প্রতিটি বুলেট আইটেম। আপনার পছন্দ অনুসারে পিক্সেল মান কাস্টমাইজ করুন।

Comments

এছাড়াও, শৈলী / শৈলীর ধরণের ট্যাগগুলি হ্রাস করা হয়েছে

— বেন স্লেড

Answer 6

একটি সম্পূর্ণ তালিকায় প্রয়োগ করতে, ব্যবহার করুন

ul.space_list li { margin-bottom: 1em; }

তারপরে, এইচটিএমএলে:

<ul class=space_list>
<li>A</li>
<li>B</li>
</ul>

Answer 7

সিউডো ক্লাস ব্যবহার করে প্রতিটি তালিকার জন্য প্যাডিং-ডাউন সেট করা একটি কার্যকর পদ্ধতি। লাইন উচ্চতা ব্যবহার করা যেতে পারে। মনে রাখবেন যে ফন্ট-পরিবার, ফন্ট-ওজন ইত্যাদির মতো ফন্টের বৈশিষ্ট্যগুলি অসম উচ্চতার জন্য ভূমিকা পালন করে।

Comments

আপনি কি নিজের সমাধানের উদাহরণ দিতে পারবেন?

— মুলডেক

Answer 8

<br>মধ্যে <li></li>লাইন এন্ট্রি সকল ওয়েব ব্রাউজার যে আমি চেষ্টা করেছি এ পুরোপুরি ভাল কাজ বলে মনে হয়, কিন্তু এটি অন লাইন W3C এর সিএসএস 3 পরীক্ষক পাস ব্যর্থ। এটি আমার পরে ঠিক রেখার ব্যবধান দেয়। যতদূর আমি উদ্বিগ্ন, যেহেতু এটি নিঃসন্দেহে কার্যকর হয়, আমি ডাব্লু 3 সি যাই বলি না কেন, যতক্ষণ না কেউ ভাল আইনী বিকল্প নিয়ে আসতে পারে, আমি এটি ব্যবহার করে চলেছি।

Comments

আপনি যদি বর্তমান লাইনের উচ্চতায় সন্তুষ্ট হন তবে আপনার পরামর্শটি ঠিকঠাক কাজ করে তবে আমি মনে করি তিনি নিজের জায়গার পরিমাণ নির্দিষ্ট করতে চান। লাইন বিরতি ব্যবহার করে বর্তমান লাইনের উচ্চতা ব্যবহার করে কেবল নতুন লাইন তৈরি করা হবে।

— 1.21 গিগাওয়াটস

আপনি যদি অনেক আইটেম সহ একটি তালিকায় পুনরাবৃত্তি করেন তবে বিআর যুক্ত করা একটি ভয়ানক অনুশীলন। উপরের উত্তরগুলির পরামর্শ অনুসারে মার্কআপ স্থান যুক্ত করার নিরাপদ এবং নিশ্চিত শট way

— সিওয়ারারিওর 404