100% প্রস্থ ছাড়াই ব্লক প্রদর্শন করুন

Question

আমি ডিসপ্লে সম্পত্তি ব্যবহার করে অন্য উপাদানের নীচে উপস্থিত হতে একটি স্প্যান উপাদান সেট করতে চাই। আমি ইনলাইন-ব্লক প্রয়োগ করার চেষ্টা করেছি তবে সাফল্য ছাড়াই এবং অনুভব করেছি যে আমি যদি কোনওভাবে উপাদানটিকে 100% প্রস্থ প্রদান এড়াতে সক্ষম হয়ে থাকি (আমি উপাদানটি "প্রসারিত করতে চাই না")। এটি করা যেতে পারে, বা না হলে, এই ধরণের সমস্যা সমাধানের জন্য ভাল প্রক্সিস কি?

উদাহরণ: একটি সংবাদ তালিকা যেখানে আমি প্রতিটি পোস্টের শেষে একটি "আরও পড়ুন" লিঙ্ক সেট করতে চাই (নোট: <a>পরিবর্তে <span>)

<li>
<span class="date">11/15/2012</span>
<span class="title">Lorem ipsum dolor</span>
<a class="read-more">Read more</a> 
</li>

আপডেট: সমাধান হয়েছে S সিএসএসে আবেদন করুন

li {
    clear: both;
}
li a {
    display: block;
    float: left;
    clear: both;
}

Comments

আমাদের দেখাতে কি কোনও মার্কআপ (HTML বা CSS) পেয়েছেন? আসলে কাজ না করেই সমস্যাটি নিয়ে কাজ করা কঠিন। এছাড়াও jsfiddle একটি ডেমো ভাল হবে।

— টম ওকলে

ভেবেছিলাম আমার কোনও নমুনা কোডের দরকার নেই যেহেতু এটি কেবল একটি স্প্যান উপাদান নির্ধারণের বিষয়ে। আপডেট পোস্ট দেখুন।

— স্টাফান এস্টবার্গ

আমি নীচে উল্লিখিত হিসাবে কেবলমাত্র এক লাইন কোড ব্যবহার করে আপনি সেই সমস্ত মার্কআপটিকে গুরুত্বের সাথে কাটাতে পারেন।

— হা 404

Answer 1

যদি আমি আপনার প্রশ্নটি সঠিকভাবে বুঝতে পারি তবে নীচের সিএসএস আপনার স্প্যানগুলির নীচে ভাসিয়ে দেবে এবং এটি 100% প্রস্থ থেকে আটকাবে:

a {
    display: block; 
    float: left; 
    clear: left; 
}

Comments

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

— স্টাফান এস্টবার্গ

যদি আমি লি পিতামাতার জন্য একটি ক্লিয়ারফিক্স প্রয়োগ করি তবে এটি কাজ করে। এই সমাধান সঙ্গে যেতে হবে, ধন্যবাদ পিজে।

— স্টাফান এস্টবার্গ

Answer 2

ব্যবহার display: table।

এই উত্তরটি কমপক্ষে 30 টি অক্ষর হতে হবে; আমি ২০ এ প্রবেশ করেছি, সুতরাং এখানে আরও কয়েকটি।

Comments

প্রতিভা সমাধান। margin: 0 auto;আপনি যদি এটি কেন্দ্রিক প্রয়োজন।

— মাফিয়া

আমি আপনাকে দুর্দান্ত মনে করি।

— বিলেণোহ

display: table;কাজ করে, তবে কোনও প্যাডিং গ্রহণ করে না।

— donquixote

@ ha404 আপনি ঠিক বলেছেন, প্যাডিং কাজ করে! jsfiddle.net/wgj7xvLe/4 অন্তত আমার ব্রাউজারে (ক্রোমিয়াম)।

— ডনকিক্সোট

@ ডনকুইকসোট, যতক্ষণ আপনি সীমান্ত-পতন ব্যবহার করবেন না ততক্ষণ প্যাডিং গ্রহণ করা উচিত: পৃথক। শুধু সমস্যা ছিল।

— ব্র্যাড

Answer 3

তুমি ব্যবহার করতে পার:

width: max-content;

দ্রষ্টব্য: সমর্থন সীমাবদ্ধ, সমর্থনকারী ব্রাউজারগুলির সম্পূর্ণ ভাঙ্গনের জন্য এখানে চেক করুন

Comments

আমি এর কথা কখনও শুনিনি! মজাদার.

— রায়ান

ক্রোম 46 এবং এফএফ 66 এর পরে ভাল ছিল answer উত্তরটি গ্রহণ করা উচিত। inline-blockএট আল আমার লেআউটটি ভঙ্গ করছিল।

— i336_

@ i336_ আজও এটি এজ ব্রাউজার দ্বারা সমর্থিত নয়।

— ক্রিসডাব্লু

এজ, বা ক্রোমিয়াম এজ? (স্পষ্টরূপে বলার জন্য; প্রাক্তন বেশ কিছুক্ষণের জন্য বাইরে চলে যাচ্ছেন ...)

— আই 336_

Caniuse.com অনুসারে এটি 20 ই জানুয়ারী, 1420 এ প্রকাশিত এজ হিসাবে এজতে সমর্থিত হয়েছে total মোট একটি 92% সমর্থন রেটিং রয়েছে। caniuse.com/?search=max-content এটি আমার কাছে একটি দুর্দান্ত স্বাগত। প্রায় 2 বছর আগে যখন আমি প্রথম এটির বিষয়ে শুনেছিলাম তখন এটির উত্পাদন সম্পর্কে আমার পক্ষে যথেষ্ট সমর্থন ছিল না তবে এখন তা হয়।

— Xandor

Answer 4

আমি প্রতিটি সারিটিকে তার নিজস্ব ডিভের কাছে রাখব, তাই ...

<div class="row">
    <div class="cell">Content</div>
</div>
<div class="row">
    <div class="cell">Content</div>
</div>

এবং তারপরে সিএসএসের জন্য:

.cell{display:inline-block}

আপনার আসল কোডটি না দেখে আপনাকে সমাধান দেওয়া শক্ত।

Comments

ধন্যবাদ, তবে আমি কোনও ডিভ উপাদানগুলিতে মিশ্রিত না করতে পছন্দ করব।

— স্টাফান এস্টবার্গ

Answer 5

আবার: একটি উত্তর যা কিছুটা দেরি হতে পারে (তবে যারা এই উত্তরটি খুঁজে পেতে পারেন তাদের পক্ষে)।

পরিবর্তে display:block;ব্যবহারdisplay:inline-block;

Answer 6

এটা চেষ্টা কর:

li a {
    width: 0px;
    white-space:nowrap;
}

Answer 7

আপনি নিম্নলিখিত ব্যবহার করতে পারেন:

display: inline-block;

লিঙ্ক এবং অন্যান্য উপাদানগুলিতে ভাল কাজ করে।

Answer 8

আমার এই সমস্যাটি ছিল, আমি এটি এর মতো সমাধান করেছি:

.parent {
  white-space: nowrap;
  display: table;
}

.child {
  display: block;
}

"হোয়াইট-স্পেস: নওর্যাপ" নিশ্চিত করে যে পর্যাপ্ত জায়গা না থাকলে সন্তানের বাচ্চারা (যদি এটি থাকে তবে) নতুন লাইনে আবদ্ধ না হয়।

"সাদা-স্থান: Nowrap" ছাড়াই:

"সাদা-স্থান: Nowrap" সহ:

---

সম্পাদনা: দেখে মনে হচ্ছে এটি আমার পক্ষে চাইল্ড ব্লক অংশ ব্যতীতও কাজ করে, সুতরাং এটি ঠিকঠাক কাজ করে বলে মনে হচ্ছে।

.parent {
  white-space: nowrap;
  display: table;
}