সিএসএস লেবেলের প্রস্থ কার্যকর হচ্ছে না

Question

আমার একটি জেনেরিক ফর্ম রয়েছে, যা আমি লেবেলগুলি এবং ইনপুট ক্ষেত্রে সারিবদ্ধ করার জন্য স্টাইল করতে চাই। কোনও কারণে যখন আমি লেবেল নির্বাচককে প্রস্থ দেই তখন কিছুই ঘটে না:

এইচটিএমএল:

<form id="report-upload-form" method="POST" action="" enctype="multipart/form-data">
    <p>
        <label for="id_title">Title:</label> 
        <input id="id_title" type="text" class="input-text" name="title"></p>
    <p>
        <label for="id_description">Description:</label> 
        <textarea id="id_description" rows="10" cols="40" name="description"></textarea></p>
    <p>
        <label for="id_report">Upload Report:</label> 
        <input id="id_report" type="file" class="input-file" name="report">
    </p>
</form>

সিএসএস:

#report-upload-form {
    background-color: #316091;
    color: #ddeff1;
    font-weight:bold;
    margin: 23px auto 0 auto;
    border-radius:10px;
    width: 650px;
    box-shadow:  0 0 2px 2px #d9d9d9;
}

#report-upload-form label {
    padding-left:26px;
    width:125px;
    text-transform: uppercase;
}

#report-upload-form input[type=text], 
#report-upload-form input[type=file],
#report-upload-form textarea {
    width: 305px;
}

আউটপুট:

jsFiddle

আমি কি ভুল করছি?

Comments

যাইহোক, <p>ট্যাগগুলিতে ফর্ম বিভাগগুলি মোড়ানো কি আসলেই একটি ভাল ধারণা?

— জেগালার্ডো

Answer 1

কর display: inline-block:

#report-upload-form label {
    padding-left:26px;
    width:125px;
    text-transform: uppercase;
    display:inline-block
}

http://jsfiddle.net/aqMN4/

Comments

ইনলাইন-ব্লক সহ লেগে থাকুন। এটি আই 7, আই 8, আই 9, এফ এ পরীক্ষিত

— ডেভিস

<p> এ প্রতিটি উপাদান স্থাপনের জন্য কি কার্যনির্বাহী?

— কলিন ডি

@ কলিনড আমি <p> ট্যাগ নয়, ডিভ ব্যবহার করার পরামর্শ দেব।

— ডেভিস

Answer 2

ব্যবহার display: inline-block;

ব্যাখ্যা:

দ্য labelঅর্থ এটি শুধুমাত্র বড় হিসাবে হিসাবে এটি করা প্রয়োজন একটি ইনলাইন উপাদান।

সেট displayউভয় সম্পত্তি inline-blockবা blockআদেশের জন্য এ widthসম্পত্তি কার্যকরী করতে।

উদাহরণ:

#report-upload-form {
    background-color: #316091;
    color: #ddeff1;
    font-weight: bold;
    margin: 23px auto 0 auto;
    border-radius: 10px;
    width: 650px;
    box-shadow: 0 0 2px 2px #d9d9d9;

}

#report-upload-form label {
    padding-left: 26px;
    width: 125px;
    text-transform: uppercase;
    display: inline-block;
}

#report-upload-form input[type=text], 
#report-upload-form input[type=file],
#report-upload-form textarea {
    width: 305px;
}

<form id="report-upload-form" method="POST" action="" enctype="multipart/form-data">
    <p><label for="id_title">Title:</label> <input id="id_title" type="text" class="input-text" name="title"></p>
    <p><label for="id_description">Description:</label> <textarea id="id_description" rows="10" cols="40" name="description"></textarea></p>
    <p><label for="id_report">Upload Report:</label> <input id="id_report" type="file" class="input-file" name="report"></p>
</form>

Comments

ধন্যবাদ! ইনলাইন-ব্লক হ'ল আমার যা প্রয়োজন। ব্লক এটিকে অদ্ভুত দেখাচ্ছে।

— TheOne

আইই 8 এর নীচে আইলিতে ইনলাইন-ব্লকের সমর্থনটি স্কেচিযুক্ত মনে রাখবেন - এই দিনগুলিতে সম্ভবত কোনও সমস্যা খুব বেশি নয়, তবে কিছু মনে রাখবেন। (উত্স quirksmode.org/css/display.html )

— n00dle

@ পান্ডাওড দুঃখিত, আপনি এই পোস্টে মন্তব্য করার পরে প্রায় 2 বছর হয়েছে। তবে, আমি আপনার মন্তব্যের জবাব দিচ্ছি যাতে অন্য পাঠকরা এই পোস্টের লেখকের ব্যাখ্যা দিয়ে ভুল পথে না যায়। পরবর্তীকর্মীরা যুক্তি দিয়েছিল যে labelউপাদানটি widthসম্পত্তিটিকে সম্মান করে না কারণ এটি একটি ইনলাইন উপাদান। আমি উল্লেখ করতে চাই যে inputউপাদানটি ডিফল্টরূপে একটি ইনলাইন উপাদানও। তবে এটি labelউপাদানটির বিপরীতে প্রস্থের সম্পত্তি ব্যবহার করে এর প্রস্থকে পরিবর্তিত হতে দেয় । সুতরাং লেখকের যুক্তি সঠিক নয়।

— নেটিভ

Answer 3

আমি বিশ্বাস করি লেবেলগুলি ইনলাইন, এবং তাই তারা প্রস্থ নেয় না। সম্ভবত "ডিসপ্লে: ব্লক" ব্যবহার করে সেখান থেকে যাওয়ার চেষ্টা করুন।

Answer 4

প্রথমে এটি একটি ব্লক করুন, তারপরে পরবর্তী ব্লকটিকে একটি নতুন লাইনে ঠেলা বন্ধ করতে বাম দিকে ভাসা করুন।

#report-upload-form label {
                           padding-left:26px;
                           width:125px;
                           text-transform: uppercase;
                           display:block;
                           float:left
}

Answer 5

স্টাইল দিন

display:inline-block;

আশা করি এটি সাহায্য করবে '

Answer 6

labelএর ডিফল্ট displayমোড inline, যার অর্থ এটি স্বয়ংক্রিয়ভাবে এর সামগ্রীতে নিজেকে আকার দেয়। একটি প্রস্থ সেট করতে আপনাকে সেট করতে হবে display:blockএবং তারপরে এটি সঠিকভাবে স্থাপনের জন্য কিছু ফলফিং করতে হবে (সম্ভবত জড়িত float)