কিভাবে ইনপুট এবং ক্ষেত্র নির্বাচন সমান প্রস্থ পাবেন

Question

ফর্মটিতে আমার একটি নির্বাচন করুন এবং দুটি ইনপুট ক্ষেত্র রয়েছে। এই উপাদানগুলি উল্লম্বভাবে সারিবদ্ধ হয়। দুর্ভাগ্যক্রমে, আমি এই উপাদানগুলির সমান প্রস্থ পেতে পারি না।

আমার কোডটি এখানে:

<select name="name1" style="width:198px">
  <option>value1</option>
  <option>value2</option>
</select><br/>
<input type="text" name="id1" style="width:193px"><br/>
<input type="text" name="id2" style="width:193px">

উপরের উদাহরণস্বরূপ, নির্বাচিত উপাদানগুলির সেরা প্রস্থটি 198 বা 199 পিক্সেল হয় (অবশ্যই আমি 193px চেষ্টা করেছি, তবে পার্থক্যটি প্রধান)। আমি মনে করি, এটি বিভিন্ন কম্পিউটার এবং ব্রাউজারগুলিতে রেজোলিউশনের উপর নির্ভর করে যেহেতু এই উপাদানগুলির সমান প্রস্থ নেই (কখনও কখনও আমি মনে করি পার্থক্যটি প্রায় 1 বা 2 পিক্সেল)। আমি এই উপাদানগুলি ডিভ বা সারণি সারিগুলিতে সেট করার চেষ্টা করেছি, তবে এটি কোনও লাভ করে না।

প্রশ্ন: আমি কীভাবে এই উপাদানগুলির ঠিক সমান প্রস্থ পেতে পারি?

Comments

: একই প্রশ্ন এখানে আসতে বলেছি stackoverflow.com/questions/895904/...

— ব্লাম

Answer 1

আপডেট উত্তর

ইনপুট / টেক্সারিয়া / নির্বাচনের উপাদানগুলির দ্বারা ব্যবহৃত বাক্সের মডেলটি কীভাবে পরিবর্তন করা যায় তা যাতে তারা সকলেই একইরকম আচরণ করে। আপনাকে সেই box-sizingসম্পত্তিটি ব্যবহার করতে হবে যা প্রতিটি ব্রাউজারের উপসর্গ দিয়ে প্রয়োগ করা হয়

-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box; 
box-sizing:content-box;

এর অর্থ হ'ল আমরা আগে উল্লিখিত 2px পার্থক্যটি বিদ্যমান নেই ..

http://www.jsfiddle.net/gaby/WaxTS/5/ এ উদাহরণ

দ্রষ্টব্য: আইইতে এটি সংস্করণ 8 এবং তারপরের দিকে কাজ করে ..

---

মূল

যদি আপনি তাদের সীমানা পুনরায় সেট করেন তবে selectউপাদানটি সর্বদা inputউপাদানগুলির চেয়ে 2 পিক্সেল কম হবে ..

উদাহরণ: http://www.jsfiddle.net/gaby/WaxTS/2/

Comments

উত্তর দেওয়ার জন্য ধন্যবাদ. এবং যদি আমি 2px এর জন্য সীমানা নির্ধারণ করি তবে 3px সীমান্তের জন্য ইনপুট এবং নির্বাচনের ক্ষেত্রগুলির মধ্যে 4 পিক্সেল থাকবে - 6px ...?

— luk4443

@ লুক, না যদি ইনপুট এবং সিলেক্ট উভয়েরই একই সীমানা প্রস্থ থাকে তবে পার্থক্যটি 2 পিক্সেল

— অবধি

ধন্যবাদ। আমি আপনার কোডটি বিভিন্ন ব্রাউজারে এবং ফায়ারফক্সে চেষ্টা করি সবকিছু ঠিক আছে, তবে এটি IE 8 এবং অপেরাতে কাজ করে না (বিভেদযুক্ত ইনপুট রয়েছে এবং প্রস্থ নির্বাচন করুন) :(

— luk4443

সম্ভবত আপনি বাক্স-আকার নির্ধারণ: বর্ডার-বক্স নির্দিষ্ট করার অর্থ দিয়েছিলেন? আমি মনে করি এটি আপনি বোঝাতে চেয়েছিলেন সামগ্রী বাক্সটি ডিফল্ট যেখানে প্যাডিং + মার্জিন প্রস্থে যুক্ত হয়।

— ও'রুনি

এটি সত্যই হওয়া উচিত: -এমএস-বাক্স-আকারদান: সামগ্রী-বাক্স; -moz-বক্স নির্ধারন: সামগ্রী বাক্স; -webkit-বক্স নির্ধারন: সামগ্রী বাক্স; বক্স নির্ধারন: সামগ্রী বাক্স; প্রগতিশীল বর্ধন পদ্ধতি অনুসরণ করার জন্য স্ট্যান্ডার্ড সিনট্যাক্সটি সর্বশেষে যেতে হবে যাতে ভবিষ্যতে যখন স্ট্যান্ডার্ডটি ব্যাপকভাবে প্রয়োগ করা হয়, তখন ব্যবহারকারী এজেন্টরা স্ট্যান্ডার্ড সিনট্যাক্সটি ব্যবহার করতে ডিফল্ট হয়ে যায় এবং আপনি প্রিফিক্সড সংস্করণগুলি মুছে ফেলতে পারেন।

— ব্যবহারকারী1739635

Answer 2

আমি উপরের গ্যাবির উত্তর (+1) চেষ্টা করেছি তবে এটি কেবল আমার সমস্যার সমাধান করেছে। পরিবর্তে আমি নিম্নলিখিত সিএসএস ব্যবহার করেছি, যেখানে সামগ্রী-বাক্সটি সীমানা বাক্সে পরিবর্তন করা হয়েছিল:

input, select {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

Comments

হ্যাঁ, মনে হচ্ছে ফর্ম ক্ষেত্রগুলি যেমন: টেক্সারিয়া, ইনপুট ক্ষেত্রগুলি সর্বদা সীমান্ত-বক্স বক্সের মডেলের সাথে ভাল কাজ করে। বোতাম, চেকবক্স, রেডিও, জমা, পুনরায় সেট করা, এবং অনুসন্ধান ইনপুট ডিফল্টরূপে সীমানা-বাক্স।

— ভেনসোহ

আপনার কেন ব্যবহার করা উচিত তার জন্যbox-sizing: border-box এখানে একটি ভাল যুক্তি । একটি ভাল সার্বজনীন বাস্তবায়নের জন্য, শীর্ষ স্তরের এইচটিএমএল উপাদানটি সেট করে বিবেচনা করুন এবং তারপরে উত্তরাধিকার সূচনা করুন যাতে এটি সহজেই ওভাররাইড করা যায়।

— কাইলমিট

সামগ্রী-বাক্স আমার ক্ষেত্রে কিছুই করেনি। তাদের একই প্রস্থের জন্য আমার সীমানা বাক্সের দরকার ছিল। সীমানা-বাক্স অবশ্যই আরও ভাল সমাধান, ধন্যবাদ।

— ম্যানুয়েল হফম্যান

Answer 3

CSS এ এই কোডটি যুক্ত করুন:

 select, input[type="text"]{
      width:100%;
      box-sizing:border-box;
    }

Answer 4

অন্য শ্রেণি তৈরি করুন এবং 2px উদাহরণ সহ আকারটি বাড়ান

.enquiry_fld_normal{
width:278px !important; 
}

.enquiry_fld_normal_select{
width:280px !important; 
 }