উচ্চতা এবং প্রস্থ কি স্প্যানের জন্য প্রযোজ্য?

Question

মোট নুব প্রশ্ন, তবে এখানে।

সিএসএস

.product__specfield_8_arrow {

    /*background-image:url(../../upload/orng_bg_arrow.png);
    background-repeat:no-repeat;*/
    background-color:#fc0;
    width:50px !important;
    height:33px !important;
    border: 1px solid #dddddd;
    border-left:none;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-bottom-left-radius:0px;
    border-top-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    -moz-border-radius-topleft:0px;
    -webkit-border-bottom-left-radius:0px;
    -webkit-border-top-left-radius:0px;
    margin:0;
    padding:2px;
    cursor:pointer;
}​​​

এইচটিএমএল

<span class="product__specfield_8_arrow">&nbsp;</span>​

বেহালা

মূলত আমি একটি বোতাম অনুকরণ করার চেষ্টা করছি, একটি ইনপুট ফিল্ডের পাশের একটি স্প্যান (বা কিছু) তৈরি করার মতো দেখতে চাই যা একটি অটো ফিল জেনারেটরের কারণে এটির দরকার নেই যা অন্টারে ত্রুটি তৈরি করে। ভেবেছিলাম এটি আপাতত দ্রুত সমাধান হয়ে উঠবে তবে অবশ্যই তা নয় not

ধন্যবাদ।

Comments

আপনি

— স্ট্যাকওভারফ্লো.com/

এছাড়াও মানটি পরীক্ষা করুন, বিশেষত w3.org/TR/CSS2/visudet.html#the-width-poperty and w3.org/TR/CSS2/visudet.html#the-ightight-poperty , যা বৈশিষ্ট্যগুলি উল্লেখ করে " প্রযোজ্য : সব উপাদান কিন্তু অ প্রতিস্থাপিত ইনলাইন উপাদান, টেবিল সারি, এবং সারি গ্রুপ "

— outis

Answer 1

স্প্যান একটি ইনলাইন উপাদান। এটির প্রস্থ বা উচ্চতা নেই।

আপনি এটিকে একটি ব্লক-স্তরের উপাদান হিসাবে রূপান্তর করতে পারেন, তারপরে এটি আপনার মাত্রিক নির্দেশাবলী গ্রহণ করবে।

span.product__specfield_8_arrow
{
    display: inline-block; /* or block */
}

Comments

ধন্যবাদ, এটি স্থির করুন। আমি প্রদর্শনের চেষ্টা করেছি: ব্লক আগে কিন্তু ইনলাইন ব্লক এটি ঠিক করেছে।

— কাইল

এটাই সমস্যা। যদি display: blockনির্দিষ্ট করা থাকে তবে স্প্যানটি পরবর্তী লাইনে প্রদর্শিত হওয়ার পরে একটি ইনলাইন উপাদান এবং একটি উপাদান হতে থামবে। আমার একটি উপাদান রয়েছে যা ইনলাইন, তবে পছন্দসই প্রস্থের হতে পারে।

— পল

ব্যবহারকারী প্রদর্শনের আরও ভাল সমাধান হ'ল: ইনলাইন-ব্লক

— অনন্ত

Answer 2

এর divপরিবর্তে spanসিএসএস ব্যবহার করার চেষ্টা করুন display: block;বা display: inline-block;- spanডিফল্টরূপে একটি ইনলাইন উপাদান যা নিতে পারে না widthএবং heightবৈশিষ্ট্যগুলি ব্যবহার করতে পারে।

Comments

একটি ডিভ একটি স্প্যানের জন্য অর্থপূর্ণ প্রতিস্থাপন নয়। একটি স্প্যান একটি পাঠ্য পাত্রে থাকে যখন একটি ডিভ একটি লেআউট ধারক হয়। বিকাশকারী আর্টের মতো একটি ইনলাইন-ব্লক স্টাইল প্রয়োগ করা সঠিক উত্তর।

— ব্রায়ান স্কট

প্রশ্নটি কোনও প্রসঙ্গ সরবরাহ করে না যে কোনও ডিভ সহজাতভাবে শব্দার্থগতভাবে অনুপযুক্ত।

— আইজাক

প্রকৃতপক্ষে, অপের মার্কআপটি পড়ে এটি দেখতে দেখতে দেখতে মনে হচ্ছে যে প্রশ্নযুক্ত উপাদানটি কেবল একটি ব্যাকগ্রাউন্ড চিত্র প্রদর্শন করতে ব্যবহৃত হচ্ছে। এই ক্ষেত্রে একটি ডিভ আসলে আরও উপযুক্ত হবে। -1 আইজাকের মূল মন্তব্য থেকে সরানো।

— ব্রায়ান স্কট

আরও, আমি স্প্যান পরিবর্তন করার আগে একটি ডিভ ব্যবহার করার চেষ্টা করেছি, এটি সর্বদা পূর্ববর্তী ডিভের অধীনে প্রদর্শিত হয় .. তাই স্প্যানের সাথে গেল :)

— কাইল

Answer 3

@ হামেদ থেকে অনুপ্রাণিত হয়ে আমি নিম্নলিখিতগুলি যুক্ত করেছি এবং এটি আমার পক্ষে কাজ করেছে:

display: inline-block; overflow: hidden; 

Answer 4

স্প্যানটি কেবল তখনই প্রস্থ এবং উচ্চতা নেয় যখন আমরা এটিকে উপাদানটিকে ব্লক করে দেই।

span {display:block;}

Comments

আমার মনে display: inline-block;হয় আরও ভাল

— 151291

এইভাবে আপনি সমস্ত স্প্যানগুলির জন্য পরিবর্তন করতে পারবেন, আমি একটি ক্লাস ব্যবহার করার পরামর্শ দিচ্ছি।

— হোলা সোয় এদু ফেলিজ নাভিদাদ

Answer 5

@ পলের মন্তব্য অনুসারে, যদি প্রদর্শন: ব্লকটি নির্দিষ্ট করা থাকে, স্প্যানটি পরবর্তী লাইনে প্রদর্শিত হওয়ার পরে একটি ইনলাইন উপাদান এবং একটি উপাদান হতে বন্ধ করে।

আমি আমার স্প্যান উচ্চতা সমস্যার সমাধান খুঁজতে এখানে এসেছি এবং আমি নিজের সমাধান পেয়েছি

overflow:hidden;এটি ইনলাইন যুক্ত করা এবং কী যুক্ত করা কেবলমাত্র IE8 কুইর্কস মোডে পরীক্ষা করা সমস্যার সমাধান করবে

Comments

আমি overflow:hidden;এই প্রসঙ্গে দেখছি । এমডিএন বলছে , "সামগ্রীগুলি ক্লিপ করা আছে, কোনও স্ক্রোলবার ছাড়াই" । বিপরীত মনে হয়। এটি এখানে কি করে?

— বব স্টেইন

Answer 6

spanগুলি ডিফল্টরূপে ইনলাইন প্রদর্শিত হয়, যার অর্থ তাদের উচ্চতা এবং প্রস্থ নেই।

display: blockআপনার স্প্যান এ একটি যোগ করার চেষ্টা করুন ।

Answer 7

স্প্যানটি একটি ইনলাইন উপাদান হিসাবে শুরু হয়। উদাহরণস্বরূপ, আপনি এর প্রদর্শন বৈশিষ্ট্যটিকে ব্লক করে পরিবর্তন করতে পারেন এবং এর উচ্চতা / প্রস্থের বৈশিষ্ট্যগুলি কার্যকর হতে শুরু করবে।

Answer 8

span {display:block;} এছাড়াও একটি লাইন ব্রেক বিরতি দেয়।

এটি এড়াতে, ব্যবহার করুন span {display:inline-block;}এবং তারপরে আপনি ইনলাইন উপাদানটিতে প্রস্থ এবং উচ্চতা যুক্ত করতে পারেন এবং আপনি এটি ব্লকের মধ্যেও প্রান্তিককরণ করতে পারেন:

span {
        display:inline-block;
        width: 5em;
        font-weight: normal;
        text-align: center
     }

আরও এখানে