নির্দিষ্ট `ইনলাইন-ব্লক` আইটেমের আগে / পরে লাইন বিরতিতে সিএসএস

Question

ধরা যাক আমার এই HTML আছে:

<h3>Features</h3>
<ul>
    <li><img src="alphaball.png">Smells Good</li>
    <li><img src="alphaball.png">Tastes Great</li>
    <li><img src="alphaball.png">Delicious</li>
    <li><img src="alphaball.png">Wholesome</li>
    <li><img src="alphaball.png">Eats Children</li>
    <li><img src="alphaball.png">Yo' Mama</li>
</ul>

এবং এই সিএসএস:

li { text-align:center; display:inline-block; padding:0.1em 1em }
img { width:64px; display:block; margin:0 auto }

ফলাফল এখানে দেখা যাবে: http://jsfiddle.net/YMN7U/1/

এখন কল্পনা করুন যে আমি এটিকে তিনটি কলামে বিভক্ত করতে চাই, <br>তৃতীয়টির পরে একটি ইনজেকশনের সমতুল্য <li>। (প্রকৃতপক্ষে এটি করা শব্দার্থক এবং সিনট্যাক্টিকালি অবৈধ হবে))

আমি <li>সিএসএসে তৃতীয়টি কীভাবে নির্বাচন করব তা জানি , তবে এর পরে আমি কীভাবে একটি লাইন বিরতি জোর করব? এটা কাজ করে না:

li:nth-child(4):after { content:"xxx"; display:block }

আমি আরও জানি যে floatপরিবর্তে ব্যবহার করে এই বিশেষ মামলাটি সম্ভব inline-block, তবে আমি সমাধানগুলি ব্যবহারে আগ্রহী নই float। আমি আরও জানি যে স্থির-প্রস্থের ব্লকগুলির সাহায্যে পিতামাতার ulউপরের প্রস্থটি প্রায় 3x প্রস্থে নির্ধারণ করা সম্ভব ; আমি এই সমাধানে আগ্রহী নই। আমি আরও জানি যে আমি display:table-cellযদি সত্যিকারের কলামগুলি চাইতাম তবে আমি ব্যবহার করতে পারি; আমি এই সমাধানে আগ্রহী নই। আমি ইনলাইন সামগ্রীতে কোনও বিরতি জোর করার সম্ভাবনা নিয়ে আগ্রহী।

সম্পাদনা : পরিষ্কার হওয়ার জন্য, আমি 'তত্ত্ব' সম্পর্কে আগ্রহী, কোনও বিশেষ সমস্যার সমাধান নয়। সিএসএস display:inline(-block)?উপাদানগুলির মাঝে একটি লাইন ব্রেককে ইনজেক্ট করতে পারে , বা এটি অসম্ভব? যদি আপনি নিশ্চিত হন যে এটি অসম্ভব, তবে এটি একটি গ্রহণযোগ্য উত্তর।

Comments

দুটি ভিন্ন তালিকায় প্রথম তিনটি এবং দ্বিতীয় তিনটি রাখবেন? আমি ধরে নিচ্ছি আপনি এটি করতে চান না, তবে আমি ভেবেছিলাম আমি "এটি সেখানে ফেলে

— দেবো

দেখে মনে হচ্ছে আপনার এখানে কী অর্জন করার চেষ্টা করছেন তা আমাদের জানানোর দরকার যাতে কেউ সেরা পদ্ধতির সুপারিশ করতে পারে। আপনার বাদ দেওয়া সমস্ত বিকল্প আপনার কাছে থাকা সমস্যাটি সমাধান করার জন্য বিদ্যমান, অন্য সমাধানের প্রয়োজন কেন?

— জেক

@ জ্যাক আমি আসলে আমি যা বলেছিলাম ঠিক তেমনটাই করছিলাম: উপাদানগুলির একটি শব্দার্থক তালিকা ব্যবহার করে এবং নির্দিষ্টগুলির পরে মোড়ানো চাই। অনুশীলনে আমি ধারকটির প্রস্থ নির্ধারণ করেছি, তবে এটি কেবলমাত্র আমার বিশেষ ক্ষেত্রে কাজ করে কারণ আইটেমগুলি একই প্রস্থে ঘটেছিল এবং আমি চেয়েছিলাম যে সেগুলি একটি ধারাবাহিক প্রান্তে মোড়ানো হোক। এটি সর্বদা ক্ষেত্রে নাও হতে পারে। আমি যা "সত্যিকার অর্থে অর্জনের চেষ্টা করছি " তা হ'ল সিএসএস ইনলাইন প্রবাহের মাঝখানে একটি লাইন বিরতি জোর করতে পারে কিনা তা শিখতে হবে। আত্মবিশ্বাসী উত্তর "এটি অবশ্যই সম্ভব নয়" গ্রহণযোগ্য (সঠিক হলে)।

— ফোগজ

Answer 1

আমি এটিকে ইনলাইন এলআই উপাদানগুলিতে কাজ করতে সক্ষম হয়েছি। দুর্ভাগ্যক্রমে, এলআই উপাদানগুলি ইনলাইন-ব্লক থাকলে এটি কাজ করে না:

সরাসরি নমুনা: http://jsfiddle.net/dWkdp/

বা ক্লিফ নোট সংস্করণ:

li { 
     display: inline; 
}
li:nth-child(3):after { 
     content: "\A";
     white-space: pre; 
}

Comments

সিম, কেন "\ এ" মুদ্রিত হয় না? সর্বদা আমি চেষ্টা করেছি এমন সমস্ত কিছুই :afterসরাসরি পাঠ্য হিসাবে মুদ্রণ করে।

— জ্যাকপ্যারিস

@ জেএমসিসিআরটিভ যে এএসসিআইআই 0x0 এ, একেএ একটি এলএফ (লাইন ফিড) চরিত্র। W3.org/TR/CSS2/syndata.html#strings

— ফ্রোগজ

@ জেএমসি \Aহ'ল লাইন ফিডের চরিত্র ... এটি একটি রক্ষা

— Šime বিদাস

@JMC অফিসিয়াল বৈশিষ্ট: w3.org/TR/CSS21/syndata.html#strings SitePoint: reference.sitepoint.com/css/content

— Sime Vidas

আমি প্রতি কয়েকমাস এই প্রশ্নে ফিরে আসতে থাকি বলে এখানে মন্তব্য করা ... এটি ইনলাইন-ব্লকে কাজ করবে না কারণ আপনি কোনও ইনলাইন প্রসঙ্গে একটি ব্লক ধারকের মতো কাজ করে এমন কোনও কিছুতে লাইন ব্রেকগুলি যুক্ত করছেন। <li> s এর মধ্যে লাইন ব্রেক breakোকিয়ে আপনি যদি প্রসঙ্গটি ভেঙে ফেলতে পারেন তবে এটি কাজ করবে। প্রতিক্রিয়াশীল ডিজাইন ব্রেকপয়েন্টগুলির জন্য এটি কার্যকর কারণ লজ্জাজনক। আমি অনুমান করি বেশিরভাগ সময় "ইনলাইন" তালিকার জন্য ইনলাইন-ব্লকের মতোই কার্যকর

— ব্যবহারকারী 1010892

Answer 2

আপনি আপনার সমস্যার অনেকগুলি "সমাধান" নিয়ে আগ্রহী নন। আপনি যা করতে চান তা করার সত্যিই একটি ভাল উপায় আছে বলে আমি মনে করি না। যেকোনো জিনিস ব্যবহার সন্নিবেশ :afterএবংcontent ঠিক একই শব্দবিন্যাসগত ও শব্দার্থিক বৈধতা যদি আপনি শুধু নিজের সেখানে লেখা ছিল তা করত না হয়েছে।

সরঞ্জাম সিএসএস কাজ সরবরাহ করে। আপনি কেবলমাত্র ভাসা ভাসা উচিত liএবং তারপরে clear: leftআপনি যখন নতুন লাইন শুরু করতে চান, যেমনটি আপনি উল্লেখ করেছেন:

একটি উদাহরণ দেখুন: http://jsfiddle.net/marcuswhybrow/YMN7U/5/

Comments

ওপি আপনার সমাধানটিতে আগ্রহী নয় :)

— Vidime বিদ্যা

ভাল আপনি ব্যবহার করে যা কিছু করতে পারেন তা :afterসিনথেটিকভাবে বৈধ বা একটি ভাল ধারণা হবে, কারণ এটি করার জন্য ইতিমধ্যে সরঞ্জামগুলি রয়েছে। সুতরাং উত্তর।

— মারকাস হোয়ব্রো

ফ্লোট ব্যবহার না করার একটি কারণ হ'ল এর মতো কোনও জিনিস নেই float: center।

— চোখের পলকহীনতা

প্লাস ইনলাইন-ব্লকটি এমন সব ধরণের উল্লম্ব সারিবদ্ধের জন্য অনুমতি দেয় যা ভাসতে পারে না

— ব্যবহারকারী 1010892

"আপনি যে কোনও কিছু ব্যবহার করে সন্নিবেশ করান: পরে এবং সামগ্রীতে ঠিক একই সিনট্যাকটিক এবং শব্দার্থক বৈধতা রয়েছে" - দেরিতে এসেছিল, তবে আমি এর সাথে পুরোপুরি একমত নই - ব্যবহারের পুরো বিষয়টি: আগে এবং: পরে স্টাইলিং সন্নিবেশ করতে সক্ষম হব এইচটিএমএলের অর্থগত অর্থের সাথে হস্তক্ষেপ করে না।

— রূপার্ট

Answer 3

এইচটিএমএল পুনর্লিখনের অনুমতি দেওয়া হয়, আপনি <ul>এর মধ্যে বাসা বাঁধতে পারেন <ul>এবং কেবল অভ্যন্তরীণটিকে ছেড়ে দিতে পারেন<li> গুলিকে ইনলাইন-ব্লক হিসাবে প্রদর্শন । এটিও শব্দার্থগতভাবে আইএমএইচও বোধগম্য হবে, কারণ গ্রুপিংটিও এইচটিএমএল-এর মধ্যে প্রতিফলিত হয়েছে।

---

<ul>
    <li>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </li>
    <li>
        <ul>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
        </ul>
    </li>
</ul>

---

li li { display:inline-block; }

---

ডেমো

$(function() { $('img').attr('src', 'http://phrogz.net/tmp/alphaball.png'); });

h3 {
  border-bottom: 1px solid #ccc;
  font-family: sans-serif;
  font-weight: bold;
}
ul {
  margin: 0.5em auto;
  list-style-type: none;
}
li li {
  text-align: center;
  display: inline-block;
  padding: 0.1em 1em;
}
img {
  width: 64px;
  display: block;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>Features</h3>
<ul>
  <li>
    <ul>
      <li><img />Smells Good</li>
      <li><img />Tastes Great</li>
      <li><img />Delicious</li>
    </ul>
  </li>
  <li>
    <ul>
      <li><img />Wholesome</li>
      <li><img />Eats Children</li>
      <li><img />Yo' Mama</li>
    </ul>
  </li>
</ul>

Answer 4

তালিকাগুলিকে সারিগুলিতে বিভক্ত করার একটি সহজ উপায় হ'ল স্বতন্ত্র তালিকা আইটেমগুলি ভাসিয়ে দেওয়া এবং তারপরে যে আইটেমটি আপনি পরবর্তী লাইনে যেতে চান সেটি আপনি ভাসাটি সাফ করতে পারেন।

উদাহরণ স্বরূপ

<li style="float: left; display: inline-block"></li>
<li style="float: left; display: inline-block"></li>
<li style="float: left; display: inline-block"></li>

<li style="float: left; display: inline-block; clear: both"></li> --- this will start on a new line
<li style="float: left; display: inline-block"></li>
<li style="float: left; display: inline-block"></li>

Comments

আপনার লক্ষ্য করা উচিত যে floatসেটিংসটি সেটিংটিকে ওভাররাইড করে inline-block। তারা সত্যিই একসাথে থাকতে পারে না

— Itay

আপনি যদি টেক্সট-এলিং ব্যবহার করেন: কেন্দ্র; এটি কাজ করবে না (ভাসমান বিরতি এটা)

— Павел Иванов

Answer 5

আমি জানি আপনি ভাসাটি ব্যবহার করতে চান নি এবং প্রশ্নটি কেবল তত্ত্ব ছিল তবে যদি কেউ এই দরকারী ব্যবহার করে তবে এখানে একটি ফ্লোট ব্যবহার করে একটি সমাধান দেওয়া হয়েছে।

liআপনি ভাসতে চান এমন উপাদানগুলিতে বামের একটি শ্রেণি যুক্ত করুন :

<li class="left"><img src="http://phrogz.net/tmp/alphaball.png">Smells Good</li>

এবং নিম্নলিখিত হিসাবে আপনার সিএসএস সংশোধন করুন:

li { text-align:center; float: left; clear: left; padding:0.1em 1em }
.left {float: left; clear: none;}

http://jsfiddle.net/chut319/xJ3pe/

আপনাকে প্রস্থ বা ইনলাইন-ব্লক নির্দিষ্ট করার দরকার নেই এবং আইআই 6 এর মতো কাজ করে।

Answer 6

আমি সারিতে প্রথম ইনলাইন উপাদানটির জন্য নির্বাচকের আগে :: তৈরি করে এবং সেই নির্বাচককে উপরের বা নীচের মার্জিনের সাথে একটি ব্লক তৈরি করে সারিটিকে কিছুটা পৃথক করে তৈরি করেছি।

.1st_item::before
{
  content:"";
  display:block;
  margin-top: 5px;
}

.1st_item
{
  color:orange;
  font-weight: bold;
  margin-right: 1em;
}

.2nd_item
{
  color: blue;
}

Answer 7

আপনি পৃষ্ঠাটি কীভাবে রেন্ডার করেন তার উপর নির্ভর করে এটি কাজ করবে তা নিশ্চিত করুন। তবে কীভাবে কেবল নতুন আনর্ডারড তালিকা শুরু করবেন?

অর্থাত

<ul>
<li>
<li>
<li>
</ul>
<!-- start a new ul to line break it -->
<ul>

Answer 8

আরও ভাল সমাধান হ'ল ওয়েবেকিট-কলামগুলি ব্যবহার করা: 2;

http://jsfiddle.net/YMN7U/889/

 ul { margin:0.5em auto;
-webkit-columns:2;
}

Comments

কিছু ব্যবহারের ক্ষেত্রে এটি একটি যুক্তিসঙ্গত সমাধান হতে পারে। এটি এক্ষেত্রে ভাল সমাধান নয়, কারণ এটি সম্পূর্ণরূপে পুনরায় আদেশ দেয় সামগ্রীটি নীচে-পরে-ডাউনের পরিবর্তে নীচে-পরে যেতে হবে।

— ফ্রেগজ

কে কেবল এমন একটি ওয়েব অ্যাপ্লিকেশন তৈরি করতে চায় যা কেবল কয়েকটি ব্রাউজারে কাজ করে?

— ব্যবহারকারী 2867288

Answer 9

সম্ভবত এটি কেবল সিএসএসের মাধ্যমেই সম্পূর্ণ সম্ভব তবে আমি যতটা পারি "ফ্লোট" এড়ানো পছন্দ করি কারণ এটি তার পিতামাতার উচ্চতার সাথে হস্তক্ষেপ করে।

আপনি যদি jQuery ব্যবহার করছেন তবে আপনি একটি সহজ `wrapN` প্লাগইন তৈরি করতে পারেন যা" wrapAll` এর অনুরূপ কেবলমাত্র "N" উপাদানগুলিকে আবৃত করে এবং তারপরে লুপটি ব্যবহার করে পরবর্তী "N" উপাদানগুলিকে ব্রেক করে এবং মোড়কে দেয়। তারপরে আপনার মোড়কের ক্লাসটি `প্রদর্শন: ব্লক; to এ সেট করুন`

(function ($) {
    $.fn.wrapN = function (wrapper, n, start) {
        if (wrapper === undefined || n === undefined) return false;
        if (start === undefined) start = 0;
        for (var i = start; i < $(this).size(); i += n)
           $(this).slice(i, i + n).wrapAll(wrapper);
        return this;
    };
}(jQuery));

$(document).ready(function () {
    $("li").wrapN("<span class='break' />", 3);
});

এখানে সমাপ্ত পণ্যটির একটি জেএসফিডাল রয়েছে:

http://jsfiddle.net/dustinpoissant/L79ahLoz/