html - tutorial - external css




প্রদর্শন সঙ্গে ইনপুট: ব্লক একটি ব্লক নয়, কেন না? (4)

কেন display:block;width:auto; আমার টেক্সট ইনপুট একটি div মত আচরণ না এবং পাত্রে প্রস্থ পূরণ?

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

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

আমি একটি workaround প্রত্যক্ষ উত্তর পছন্দ করতে চাই। এটি একটি CSS quirk মত মনে হয় এবং বোঝার পরে এটি দরকারী হতে পারে।

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

আমি নির্দেশ করতে হবে আমি ইতিমধ্যে wrapper workarounds সঙ্গে এই কাজ করতে পারেন। পৃষ্ঠাটি সিমেন্টিক্স এবং CSS সিলেক্টর সম্পর্কের সাথে এই স্ক্রুিংয়ের ব্যপারে আমি সমস্যার প্রকৃতি বুঝতে চেষ্টা করছি এবং INPUT এর প্রকৃতিটি নিজেই পরিবর্তন করে এটি অতিক্রম করা যেতে পারে কিনা।

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

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

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


অপেক্ষাকৃত অজানা box-sizing:border-box ব্যবহার করে সমাধানটি দেখুন box-sizing:border-box সিএসএস থেকে 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 এবং ইন্টারনেট এক্সপ্লোরার 7 কে এরিক আর্ভিডসন দ্বারা লিখিত আচরণের মাধ্যমে শতাংশ এবং অন্যান্য অ-পিক্সেলের প্রস্থ সমর্থন করার জন্য ডিন এডওয়ার্ডসের কিছু পরিবর্তনগুলি সমর্থন করে।

কাজ উদাহরণ
আচরণ (boxsizing.htc)


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

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

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

এছাড়াও আপনি এই মত জাল, পারে:

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

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

form { padding-right: 12px; overflow: visible; }
input { display: block; width: 100%; }




css