सीएसएस एक विशेष `इनलाइन-ब्लॉक` आइटम से पहले / बाद में लाइन ब्रेक करने के लिए

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

मैं इनलाइन एलआई तत्वों पर काम करने में सक्षम हूं। दुर्भाग्य से, यह काम नहीं करता है यदि LI तत्व इनलाइन-ब्लॉक हैं:

लाइव डेमो: http://jsfiddle.net/dWkdp/

या क्लिफ नोट्स संस्करण:

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

Comments

Sime, "\ A" प्रिंट आउट क्यों नहीं करता है? सब कुछ मैंने :afterहमेशा सीधे पाठ के रूप में प्रिंट के साथ कोशिश की है ।

— जेकपैरिस

@JMCCreative कि ASCII 0x0A, AKA एक LF (लाइन फीड) चरित्र है। W3.org/TR/CSS2/syndata.html#strings

— फ्रॉग्ज

@JMC \Aलाइन फीड कैरेक्टर है ... यह पलायन है

— asटाइम विद

@JMC आधिकारिक युक्ति: w3.org/TR/CSS21/syndata.html#strings साइट पॉइंट : reference.sitepoint.com/css/content

— Vidime Vidas

यहाँ टिप्पणी करते हुए कि मैं हर कुछ महीनों में इस सवाल पर वापस आता रहता हूं ... यह इनलाइन-ब्लॉक पर काम नहीं करेगा क्योंकि आप लाइन ब्रेक को कुछ इस तरह जोड़ रहे हैं कि यह इनलाइन संदर्भ में ब्लॉक कंटेनर की तरह काम कर रहा है। यदि आप <li> s के बीच लाइन ब्रेक लगाकर संदर्भ से बाहर निकल सकते हैं तो यह काम करेगा। वास्तव में शर्म की बात है कि यह उत्तरदायी डिजाइन ब्रेकप्वाइंट के लिए उपयोगी है। मुझे लगता है कि ज्यादातर समय "इनलाइन" सूचियों के लिए इनलाइन-ब्लॉक के रूप में उपयोगी है

— उपयोगकर्ता 1010892

Answer 2

आप अपनी समस्या के लिए बहुत सारे "समाधान" में रुचि नहीं रखते हैं। मुझे नहीं लगता कि वास्तव में ऐसा करने का एक अच्छा तरीका है कि आप क्या करना चाहते हैं। कुछ भी आप का उपयोग कर सम्मिलित करें :afterऔरcontent बिल्कुल वैसा ही वाक्यात्मक और अर्थ वैधता अगर आप बस अपने आप को वहाँ में यह लिखा था यह किया होता है।

उपकरण सीएसएस काम प्रदान करते हैं। जैसा कि आपने उल्लेख किया है, आपको बस liएस और उसके बाद clear: leftनई लाइन शुरू करनी चाहिए।

एक उदाहरण देखें: http://jsfiddle.net/marcuswhybrow/YMN7U/5/

Comments

ओपी को आपके समाधान में कोई दिलचस्पी नहीं है :)

— asime Vidas

अच्छी तरह से आप जो कुछ भी कर सकते हैं :afterवह वाक्यविन्यास रूप से मान्य या एक अच्छा विचार होगा, क्योंकि ऐसा करने के लिए पहले से ही उपकरण मौजूद हैं। इसलिए उत्तर।

— मार्कस व्हॉटब्रो

झांकियों का उपयोग नहीं करने का एक कारण यह भी है कि इसमें कोई बात नहीं है float: center।

— आंखों की रोशनी

प्लस इनलाइन-ब्लॉक ऊर्ध्वाधर संरेखण के सभी प्रकारों की अनुमति देता है जो तैर ​​नहीं सकते हैं

— user1010892

"आपके द्वारा उपयोग की जाने वाली कोई भी चीज: बाद और सामग्री में एक ही वाक्यविन्यास और शब्दार्थ वैधता है" - पार्टी में देर से आना, लेकिन मैं इससे पूरी तरह असहमत हूं - उपयोग करने की पूरी बात: पहले और बाद में स्टाइल डालने में सक्षम होना Html के अर्थ के साथ हस्तक्षेप नहीं करता है।

— रूपर्ट

Answer 3

जब html को पुनर्लेखन की अनुमति दी जाती है, तो आप <ul>s के भीतर घोंसला बना सकते हैं <ul>और <li>इनलाइन-ब्लॉक के रूप में केवल आंतरिक s को प्रदर्शित कर सकते हैं । यह भी शब्दार्थी IMHO होगा, क्योंकि समूहीकरण HTML के भीतर भी परिलक्षित होता है।

---

<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/

आपको चौड़ाई या इनलाइन-ब्लॉक निर्दिष्ट करने की आवश्यकता नहीं है और IE6 के रूप में वापस काम करता है।

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

ध्यान दें कि यह काम करेगा, यह निर्भर करता है कि आप पृष्ठ कैसे प्रस्तुत करते हैं। लेकिन कैसे के बारे में सिर्फ एक नई unordered सूची शुरू?

अर्थात

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

Answer 8

एक बेहतर उपाय है -webkit- कॉलम का उपयोग करना: 2;

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

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

Comments

कुछ उपयोग मामलों के लिए, यह एक उचित समाधान हो सकता है। यह इस मामले में एक अच्छा समाधान नहीं है, क्योंकि यह पूरी तरह से तब-डाउन के बजाय नीचे-फिर-पार जाने के लिए सामग्री को पूरी तरह से फिर से ऑर्डर करता है।

— फ्रॉग्ज

कौन एक वेब एप्लिकेशन बनाना चाहता है जो केवल कुछ ब्राउज़रों में काम करता है?

— user2867288

Answer 9

हो सकता है कि यह केवल सीएसएस के साथ पूरी तरह से संभव हो लेकिन मैं "फ्लोट" से बचना पसंद करता हूं जितना मैं कर सकता हूं क्योंकि यह माता-पिता की ऊंचाई के साथ हस्तक्षेप करता है।

यदि आप jQuery का उपयोग कर रहे हैं, तो आप एक सरल `रैपएन` प्लगइन बना सकते हैं, जो` रैपअल् `के समान है, सिवाय इसके कि यह केवल" एन "तत्वों को लपेटता है और फिर लूप का उपयोग करके अगले" एन "तत्वों को तोड़ता है। फिर अपने रैपर क्लास को `डिस्प्ले: ब्लॉक;` पर सेट करें।

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

यहाँ तैयार उत्पाद का एक JSFiddle है:

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