ডিসপ্লে সহ ইনপুট: ব্লক কোনও ব্লক নয়, কেন নয়?

153

display:block;width:auto;আমার পাঠ্য ইনপুটটিতে কোনও ডিভের মতো আচরণ করে না এবং ধারক প্রস্থটি পূরণ করে না কেন ?

আমি এই ছাপে ছিলাম যে একটি ডিভ হ'ল স্বয়ংক্রিয় প্রস্থ সহ একটি ব্লক উপাদান। নিম্নলিখিত কোডে ডিভ এবং ইনপুটটির অভিন্ন মাত্রা থাকা উচিত নয়?

প্রস্থ পূরণের জন্য আমি কীভাবে ইনপুট পেতে পারি? 100% প্রস্থ কাজ করবে না, কারণ ইনপুটটিতে প্যাডিং এবং একটি সীমানা রয়েছে (1 পিক্সেল + 5 পিক্সেল + 100% + 5 পিক্সেল + 1 পিক্সেলের চূড়ান্ত প্রস্থ তৈরি করে)। স্থির প্রস্থগুলি কোনও বিকল্প নয় এবং আমি আরও নমনীয় কিছু সন্ধান করছি।

আমি একটি কার্যবিধির সরাসরি উত্তর পছন্দ করব। এটি সিএসএসের মতো মনে হচ্ছে এবং বোঝা এটি পরে কার্যকর হতে পারে।

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>width:auto</title>

        <style>
        div, input {
            border: 1px solid red;
            height: 5px;
            padding: 5px;
        }
        input, form {
            display: block;
            width: auto;
        }
        </style>
    </head>

    <body>
        <div></div>
        <form>
            <input type="text" name="foo" />
        </form>
    </body>
</html>

আমার ইঙ্গিত করা উচিত আমি ইতিমধ্যে মোড়কের কাজের সাথে এটি করতে পারি। পৃষ্ঠা শব্দার্থক এবং সিএসএস নির্বাচক সম্পর্কগুলির সাথে এই স্ক্রু করা ছাড়াও আমি সমস্যার প্রকৃতিটি বোঝার চেষ্টা করছি এবং এটি নিজেই ইনপুটটির প্রকৃতি পরিবর্তন করে কাটিয়ে উঠতে পারে কিনা।

ঠিক আছে, এটি সত্যই আজব! আমি খুঁজে পেয়েছি যে সমাধানটি কেবল ইনপুটটিতে যুক্ত max-width:100%করা width:100%;padding:5px;। তবে এটি আরও বেশি প্রশ্ন উত্থাপন করে (যা আমি একটি পৃথক প্রশ্ন জিজ্ঞাসা করব), তবে মনে হয় প্রস্থটি সাধারণ সিএসএস বক্স মডেল ব্যবহার করে এবং সর্বাধিক প্রস্থ ইন্টারনেট এক্সপ্লোরার বর্ডার-বক্স মডেল ব্যবহার করে। কত অদ্ভুত।

ঠিক আছে, এটি শেষটি ফায়ারফক্স 3-এ একটি বাগ হিসাবে দেখা যাচ্ছে Internet ইন্টারনেট এক্সপ্লোরার 8 এবং সাফারি 4 সর্বাধিক প্রস্থকে 100% প্যাডিং + বর্ডারে সীমাবদ্ধ করে যা অনুমানটিকে বলে। অবশেষে, ইন্টারনেট এক্সপ্লোরার সঠিক কিছু পেয়েছিল।

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

html  css 
— SpliFF
সূত্র
— ক্রিস্টোফ Eblé
7
@ স্লিপকড যা হুবহু সদৃশ নয়। এই প্রশ্নটি inputসিএসএস ২.১ স্পেসিফিকেশনকে স্পষ্টতই মেনে চলে না এমন উপাদানগুলির সমস্যার সাথে সম্পর্কিত , যখন আপনি যে প্রশ্নটি যুক্ত করেছেন সেটি কীভাবে উপচে পড়া বাক্সগুলি প্রতিরোধ করতে পারে যা সিএসএস ২.১ স্পপের সীমানার মধ্যে পুরোপুরি ঘটে occurs প্রশ্ন এবং তাদের সমাধান উভয়ই ওভারল্যাপ করে তবে তাদের যথাযথ নকলগুলি বলা ভুল
— amn

উত্তর:

130

আমি কী নিয়ে এসেছি তা দেখুন, box-sizing:border-boxসিএসএস 3 থেকে অপেক্ষাকৃত অজানা স্টাইল ব্যবহার করে একটি সমাধান এটি উপাদানগুলির প্যাডিং এবং / বা সীমান্ত নির্বিশেষে যে কোনও উপাদানকে 'সত্য' 100% প্রস্থের অনুমতি দেয়।

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

        <title>Cross-browser CSS box-sizing:border-box</title>

        <style type="text/css">
            form {display:block; margin:0; padding:0; width:50%; border:1px solid green; overflow:visible}
            div, input {display:block; border:1px solid red; padding:5px; width:100%; font:normal 12px Arial}

            /* The voodoo starts here */
            .bb {
                box-sizing: border-box; /* CSS 3 rec */
                -moz-box-sizing: border-box; /* Firefox 2 */
                -ms-box-sizing: border-box; /* Internet Explorer 8 */
                -webkit-box-sizing: border-box; /* Safari 3 */
                -khtml-box-sizing: border-box; /* Konqueror */
            }
        </style>

        <!-- The voodoo gets scary. Force Internet Explorer 6 and Internet Explorer 7 to support Internet Explorer 5's box model -->
        <!--[if lt IE 8]><style>.bb {behavior:url("boxsizing.htc");}</style><![endif]-->
    </head>

    <body>
        <form name="foo" action="#">
            <div class="bb">div</div>
            <input class="bb" size="20" name="bar" value="field">
        </form>
    </body>
</html>

এই সমাধানটি ইন্টারনেট এক্সপ্লোরার 6 এবং ইন্টারনেট এক্সপ্লোরার E সমর্থন করে এরিক আরভিডসনের লিখিত আচরণের মাধ্যমে ডিন এডওয়ার্ডসের কিছু টুইটের সাথে শতাংশ এবং অন্যান্য পিক্সেল বিহীন প্রস্থকে সমর্থন করে।

কাজের উদাহরণ
আচরণ (বক্সসাইজিং এইচটিসি)

— SpliFF
সূত্র
এটি দেখতে আশ্চর্যজনক সমাধানের মতো দেখায়, তবে আইই 8 তে কাজ করে না (ডিভ এবং ফিল্ড বাক্সগুলি যথেষ্ট প্রশস্ত নয়)। আপনি কি জানেন যে এই পদ্ধতিতে কোনও আপডেট হয়েছে কিনা? ধন্যবাদ!
— রকেটমনকিগুলি
2
স্কেপ-এর এই পলিফিল আইটি 6/7 পলিফিল আপডেট করেছে আরও প্রান্তের মামলাগুলি পরিচালনা করতে এবং গিথাব-এ আইই 8 এর সাথে কাজ করতে: github.com/Schepp/box-sizing-polyfill
— নিকজহনসন
ধন্যবাদ! আমি যখন উভয়কে 300px প্রশস্ত করে সেট করেছি তখন <ইনপুট টাইপ = পাঠ্য> এবং <ইনপুট টাইপ = জমা> কেন আলাদা প্রস্থ ছিল তা আমি কাজ করতে পারিনি। এটি সমাধান! নোট করুন যে দু'বছর পরে আপনার এখনও ফায়ারফক্সের সর্বশেষ সংস্করণের জন্য -মোজ-উপসর্গটি ব্যবহার করতে হবে। caniuse.com/#feat=css3-boxsizing
— ড্যারেন কুক
4
দুর্ভাগ্যক্রমে, আপনি যদি মার্জিন যোগ করার প্রয়োজন হয় তবে এই পদ্ধতির মোড়ক ডিভটি অপসারণ করতে ব্যবহার করা যাবে না (কারণ আপনি প্রস্থটি ব্যবহার করলে 100% মার্জিনগুলি কোনও উপাদানটিতে সঠিকভাবে কাজ করে না: 100%)
— সিস্টেমপারাডক্স
6
যদিও সমস্যাটি ঠিক করে না। হ্যাঁ এটা কাজ করে আপনি ব্যবহার width:100%কিন্তু এটি আপনি ব্যবহার করে না width:auto, এখানে দেখুন: jsfiddle.net/hGuzE
— নমরূদ
8

এটি হওয়ার কারণটি হ'ল কোনও পাঠ্য ইনপুটটির আকার তার আকারের বৈশিষ্ট্য দ্বারা নির্ধারিত হয়। <ইনপুট> ট্যাগের মধ্যে আকার = "50" যুক্ত করুন। তারপরে এটিকে আকারে পরিবর্তন করুন = "100" - দেখুন আমার অর্থ কী?

আমার সন্দেহ হয় এর থেকে আরও ভাল সমাধান আছে তবে কেবলমাত্র মনে মনে আসে এসও-তে "HTML এর লুকানো বৈশিষ্ট্যগুলি" প্রশ্নের প্রশ্নে: একটি ইনপুট পরিবর্তে একটি সামগ্রী-সম্পাদনাযোগ্য ডিভ ব্যবহার করুন। ব্যবহারকারীর ইনপুটটি এনকোলেজিং ফর্মটিতে পাস করা (এটি যদি আপনার প্রয়োজন হয় তবে) কিছুটা জটিল হতে পারে।

এইচটিএমএল এর লুকানো বৈশিষ্ট্য

— MatrixFrog
সূত্র
8
সিএসএসের লোকেরা কীভাবে এটি সমর্থন করে তা জানতে আগ্রহী প্রস্থটি যদি পিক্সেল / শতাংশের সাথে স্পষ্টভাবে আকারকে ওভাররাইড করতে পারে তবে উপাদানটি ব্লক হয়ে গেলে কেন এটি সম্মান জানাতে হবে তা আমি দেখতে পাচ্ছি না।
— স্প্লিএফএফ
1
যাইহোক একই buttonহিসাবে ঘটে যা একটি sizeবৈশিষ্ট্য নেই?
— zanona
1
এমন একটি প্রশ্ন যা "এই মানের মতো কেন" এই উত্তরের মতো অংশটির দিকে আরও বেশি কেন্দ্রীভূত করে: স্ট্যাকওভারফ্লো / প্রশ্ন / 4567988/… শীর্ষস্থানীয় দাবিটি এটি কারণ inputএটি একটি প্রতিস্থাপনকারী উপাদান is
— সিওরো সান্তিলি 法轮功 冠状 病 六四 事件 法轮功
7

আপনার সেরা বেটটি হ'ল আপনার সীমানা, মার্জিন ইত্যাদির সাথে কোনও ডিভিতে ইনপুটটি মোড়ানো এবং প্রস্থের 100% এবং কোনও সীমানা, কোনও মার্জিন ইত্যাদি নেই inside

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>width:auto</title>

        <style>
            div {
                border: 1px solid red;
                padding: 5px;
            }
            input, form {
                display: block;
                width: 100%;
            }
        </style>
    </head>

    <body>
        <form>
            <div><input type="text" name="foo" /></div>
        </form>
    </body>
</html>
— জোনাথন ফিংল্যান্ড
সূত্র
1
হ্যাঁ, এটি কাজ করবে তবে এটি উত্তরের চেয়ে অনেক বেশি কাজ। আমি ইনপুটটি ব্লক আচরণকে উপেক্ষা করার কারণ মনে হচ্ছে তা প্রতিষ্ঠার চেষ্টা করছি।
— SpliFF
2
জোনাথন, দয়া করে এখানে আমার আপত্তিজনক ক্ষমাটি ক্ষমা করুন, তবে আমি এখানে সঠিক (টিএম) উত্তর খুঁজছিলাম, এবং স্পষ্টভাবে সেই অংশটি পড়েছি যেখানে @ এসপ্লিএফএফ বিশেষভাবে উল্লেখ করেছে যে তিনি "একটি কাজের ক্ষেত্রে সরাসরি উত্তর দিতে পছন্দ করবেন, তবুও আপনি এখনও আরও অপ্রয়োজনীয় যুক্ত করবেন (যেমনটি এসও এবং ইন্টারনেটে অন্য কোথাও বহুবার পুনরাবৃত্তি করা হয়েছে) উত্তরটি আপাতদৃষ্টিতে প্রশ্নের চুক্তিটি উপেক্ষা করে উত্তর দিন I আমি আপনাকে জিজ্ঞাসা করতে পারি - কেন? আগাম আপনাকে ধন্যবাদ জানাতে হবে - যথাযথভাবে আপনার।
— amn
1

আপনি এটি জাল করতে পারেন, এই মত:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>width:auto</title>

        <style>
        div, #inputWrapper {
            border: 1px solid red;
        }
        #topDiv {
            padding: 5px;
            height: 5px;
        }
        form {
            display: block;
        }
        #inputWrapper {
            overflow: hidden;
            height: 15px;
        }
        input {
            display: block;
            width: 100%;
            border-style: none;
            padding-left: 5px;
            padding-right: 5px;
            height: 15px;
        }
        </style>
    </head>

    <body>
        <div id="topDiv"></div>
        <form>
          <div id="inputWrapper">
            <input type="text" name="foo" />
          </div>
        </form>
    </body>
</html>
— জ্যাকব
সূত্র
1
আমি আগেও ভুয়া পদ্ধতির কাজ করেছি তবে সত্যি কথা বলতে আমি এতে অসুস্থ হয়ে পড়ছি। ইনপুট পেতে এবং ম্যাচের জন্য বাছাইয়ের জন্য 99% প্রস্থের মতো ব্যবহার করার মতো আমি সমস্ত ধরণের প্রতিবন্ধী হ্যাকগুলি দিয়ে শেষ করি। আমি সত্যিই একটি ডিভের মতো একটি ইনপুট চিকিত্সার একটি উপায় চাই এবং আমি আশা করছিলাম যে আমি কেবল কিছু উপেক্ষা করব।
— স্প্লিএফএফ
2
এছাড়াও আপনার ইনপুটটি ইনপুট র‍্যাপারে উপচে পড়বে কারণ এর প্রস্থ এখনও রয়েছে: অভ্যন্তরীণ প্যাডিং সহ 100%।
— স্পিলিএফএফ
1

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

form { padding-right: 12px; overflow: visible; }
input { display: block; width: 100%; }
— মাইক
সূত্র
1
আপনি ইনপুট প্যাডিং এবং সীমানার বাইরে রেখেছেন। আপনি কী করছেন তা বুঝতে না পারলে আমি আপনাকে ভুল বলতে যাচ্ছিলাম। এখন আমি পেয়েছি মিরকুরো যা করার চেষ্টা করেছিল (তার কোডটি এখনও ভুল, তবে ধারণাটি প্রায় ছিল)। প্যাডিং-রাইটটি 100% এর অর্থকে 12px দ্বারা পরিবর্তন করে (সীমান্তের সাথে ইনপুটের প্যাডিং)। যদিও এই পদ্ধতির অপূর্ণতা হ'ল ফর্মের অন্যান্য সমস্ত শিশু প্যাডিং দ্বারা প্রভাবিত হয় এবং পাশাপাশি ক্ষতিপূরণও প্রয়োজন।
— স্প্লিএফএফ
1

এছাড়াও আপনি এটিকে নকল করতে পারেন:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>width:auto</title>

        <style>

            .container {
                width:90%;
            }

            .container div{
                border: 1px solid red;
                padding: 5px;
                font-size:12px;
                width:100%;
            }

            input{
                  width:100%;
                border: 1px solid red;
                font-size:12px;
                padding: 5px;
            }

            form {

                margin:0px;
                padding:0px;
            }

        </style>
    </head>

    <body>
        <div class="container">
            <div>
                asdasd
            </div>
            <form action="">
                <input type="text" name="foo" />
            </form>
        </div>
    </body>
</html>
— AlexC
সূত্র
1
উপরের মতো একই সমস্যা, আপনার 100% প্রস্থে অভ্যন্তরীণ প্যাডিং রয়েছে। তা উপচে পড়বে।
— স্প্লিএফএফ
আপনি জাভাস্ক্রিপ্ট দিয়ে এটি করতে পারেন
— AlexC
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.