একটি উপাদান প্রস্থ: 100% বিয়োগ প্যাডিং কিভাবে?

Question

আমার এইচটিএমএল ইনপুট রয়েছে।

ইনপুটটি padding: 5px 10px;আমি চাই এটি প্যারেন্ট ডিভের প্রস্থের 100% (যা তরল)।

তবে ইনপুটটির width: 100%;কারণ হিসাবে 100% + 20pxআমি কীভাবে এটি ব্যবহার করতে পারি তা ব্যবহার করে ?

উদাহরণ

Comments

এই উত্তরটি আমি 15 মিনিট আগে পোস্ট করেছি দেখুন: স্ট্যাকওভারফ্লো / প্রশ্ন / 5219030/… এটি আপনার জন্য পুরোপুরি কাজ করা উচিত, যদি না আপনি আইই 7 এ কাজ করার প্রয়োজন হয়।

— ত্রিশডট

আপনি যদি আমার পদ্ধতি ব্যবহার করেন তবে আমার উত্তরে আমি যে হালকা সম্পাদনা করেছি তা দেখুন। এটি কিছু ব্রাউজারে "এমনকি প্যাডিং" নিশ্চিত করে।

— ত্রিশডট

@ হাইলউডের আমার কাছে সমাধান রয়েছে যা আই 7 এর জন্য প্যাডিং রাখছে inputএবং সমর্থন করছে

— ভ্লাদিমির স্টারকভ

দয়া করে ক্যালক ফাংশনটি ব্যবহার করে নীচের উত্তরটি দেখুন

— দান

Answer 1

box-sizing: border-box এটি ঠিক করার এক দ্রুত এবং সহজ উপায়:

এটি সমস্ত আধুনিক ব্রাউজার এবং আই 8 + এ কাজ করবে।

এখানে একটি ডেমো: http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

আধুনিক ব্রাউজারগুলিতে ব্রাউজারের উপসর্গযুক্ত সংস্করণগুলি ( -webkit-box-sizingইত্যাদি) প্রয়োজন হয় না।

Comments

আমি মনে করি না এটি কোনও সমাধানের পক্ষে খারাপ। সাধারণভাবে, অতিরিক্ত ডিভিতে উপাদানগুলি মোড়ানো হ'ল উপাদানগুলির প্যাটার্ন ধারক ছাড়িয়ে সামগ্রিক প্রস্থকে ঠেলাঠেলি না করে প্যাড উপাদানগুলিকে প্যাড করার একটি ভাল উপায়।

— জ্যাক উইলসন

মোড়ক ডিভিডে প্যাডিং সরাসরি ইনপুটগুলিতে প্যাডিং যুক্ত করার সাথে অ-অভিন্ন ফলাফলও তৈরি করে।

— ফেলিক্স ফাং

@ থার্টিডট আমার কাছে আরও কিছু নমনীয় এবং মার্জিত সমাধান রয়েছে যা ইনপুটটির প্রস্থ রাখে

— ভ্লাদিমির স্টারকভ

@ থার্টিডট হ্যাঁ, এটি কেবল আই 7 এর জন্য ভাঙা ছেড়ে দিন এবং এম-কে ঠিক করুন :)

— পেট্র পেলার

এটি আপনার যে কোনও জাউকিউরি বনাম বক্স-সাইজিং স্ক্রুগুলিকে অটো রাইজিং টেক্সারিয়াস সংরক্ষণ করে যদি না আপনি এটি লুকানো ডিভিটিতে প্রয়োগ করেন।

— মাইকেল জে। ক্যালকিনস

Answer 2

এই কারণেই আমরা box-sizingসিএসএসে রয়েছি।

আমি আপনার উদাহরণ সম্পাদনা করেছি এবং এখন এটি সাফারি, ক্রোম, ফায়ারফক্স এবং অপেরাতে কাজ করে। এটি পরীক্ষা করে দেখুন: http://jsfiddle.net/mathias/Bupr3/ আমি যা যা যুক্ত করেছি তা হ'ল:

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

দুর্ভাগ্যক্রমে পুরানো ব্রাউজারগুলি যেমন আই 7 এটি সমর্থন করে না। যদি আপনি এমন কোনও সমাধান খুঁজছেন যা পুরানো আইইগুলিতে কাজ করে তবে অন্যান্য উত্তরগুলি দেখুন।

Comments

+1, তবে caniuse.com/#search=box- সাইজিং আইই 8? এছাড়াও, github.com/Schepp/box-sizing-polyfill IE 6-7 এর জন্য একটি সমাধান সরবরাহ করে।

— অ্যালিক্স অ্যাক্সেল

+1, আপনি IE সম্পর্কে চিন্তা না করলে এটি দুর্দান্ত (উদাহরণস্বরূপ ফোনগ্যাপ ব্যবহার করার সময়)

— লূক বি।

এটি কোন ধরণের জাদুকরী? উত্তরের জন্য +1 এবং আমার উপরের মন্তব্যের জন্য +1 (এটির জন্য আমার ঠিক এটি প্রয়োজন)।

— এডুয়ার্ড লুকা

এটি ডিফল্ট আচরণ হওয়া উচিত ... প্রস্থের পরিবর্তে +20 প্রস্থের। কখনও কখনও সিএসএস গুরুতরভাবে জড়িয়ে পড়েছে বলে মনে হয়।

— Soth

আইই-তে বক্স-সাইজিং সমর্থনটি স্পষ্ট করার জন্য, আইই বক্স-সাইজিং সম্পত্তি আই ডকুমেন্ট মোডের উপর নির্ভর করে, এটি "আইই 8 স্ট্যান্ডার্ডস মোড" এবং এর থেকেও বেশি ক্ষেত্রে কাজ করে। সুতরাং ডকুমেন্ট মোডটি "আইই 8 স্ট্যান্ডার্ডস মোড" থাকলে এটি আইই 8 ব্রাউজার সংস্করণেও কাজ করবে। আশাকরি এটা সাহায্য করবে.

— সঞ্জীব

Answer 3

শতাংশে প্যাডিং ব্যবহার করুন এবং প্রস্থ থেকে সরান:

প্যাডিং: 5%;
প্রস্থ: 90%;

Comments

সুতরাং, এই সমাধানটি নন-নমনীয় লেআউটগুলির জন্য কেবল আদর্শ।

— মাফস

+1, এটির সাথে সমস্যাটি আমার অনুমান সীমানাগুলি হবে। সাধারণত, তারা সর্বোচ্চ 1 থেকে 3 পিক্সেল সর্বাধিক "ডান" দেখায়। সাব-পিক্সেল রাউন্ডিং সম্পর্কিত ব্রাউজারের অসঙ্গতি বিবেচনা করে ফলাফলগুলি খুব অনাকাঙ্ক্ষিত।

— অ্যালিক্স অ্যাক্সেল

Answer 4

আপনি ব্যবহার না করেই এটা করতে পারেন box-sizingএবং স্পষ্ট মত সমাধান width~=99%।

জেএসফিডেলে ডেমো :

• ইনপুট paddingএবং রাখুনborder
• ইনপুট নেতিবাচক অনুভূমিক margin= border-width+ যোগ করুনhorizontal padding
• পূর্ববর্তী পদক্ষেপের paddingসমান ইনপুটের মোড়কে আড়াআড়ি যুক্ত করুনmargin

এইচটিএমএল মার্কআপ:

<div class="input_wrap">
    <input type="text" />
</div>

সিএসএস:

div {
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's width */ 
    padding: 5px 10px;
    border: none;
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}

Comments

ইনপুট প্যাডিংয়ের ক্ষতিপূরণ দেওয়ার জন্য মোড়কের জন্য ইনপুট এবং প্যাডিংয়ের জন্য মার্জিন ব্যবহার করা এটি একটি ভাল কৌশল।

— maulik13

সম্পূর্ণ সম্মত !!! আমি এই সমাধানটি ব্যবহার করেছি এবং এটি কোনও নোংরা কৌশল না দিয়ে ব্যাপকভাবে কাজ করে! এটি এই উত্তরগুলির প্রতিটি ধরণের সমাধান হতে হয়েছিল ..

— আন্দ্রে ফিগুয়েরেদো

নেতিবাচক মার্জিনের কী ভূমিকা আছে তা আমি পুরোপুরি বুঝতে পারি না - কেবলমাত্র আমি জানি যে মানটি যদি ভুল হয় তবে বাক্সটি একপাশে শেষ হয় তবে কোনওভাবে একটি প্রতিসাম্য মার্জিন এটি ঠিক করে দেয়

— কেসবাশ

Answer 5

সিএসএস ক্যালক ব্যবহার করুন ()

দুর্দান্ত সরল এবং দুর্দান্ত aw

input {
    width: -moz-calc(100% - 15px);
    width: -webkit-calc(100% - 15px);
    width: calc(100% - 15px);
}​

এখানে যেমন দেখা গেছে: ডিভ প্রস্থ 100%
বিয়োগের নির্দিষ্ট পরিমাণ পিক্সেল দ্বারা ওয়েবভিটালি ( https://stackoverflow.com/users/713523/webvitaly )
মূল উত্স: http://web-profile.com.ua/css/dev/css -width-100prc-বিয়োগ-100px /

এটিকে এখানে অনুলিপি করেছেন, কারণ আমি এটি অন্যান্য থ্রেডে প্রায় মিস করেছি।

Comments

যদিও আপনাকে ম্যানুয়ালি প্রোগ্রাম করতে হবে। আদর্শভাবে এটি স্বয়ংক্রিয়ভাবে নির্ধারিত হবে।

— জ্যাকহাসা কীবোর্ড

Answer 6

ধরে নিচ্ছি যে আমি একটি পাত্রে 15px প্যাডিং সহ করছি, এটি আমি সর্বদা অভ্যন্তরের অংশের জন্য ব্যবহার করি:

width:auto;
right:15px;
left:15px;

এটি অভ্যন্তরের অংশটি প্রস্থে প্রস্থে প্রসারিত করবে যা উভয় দিকের 15px কম হওয়া উচিত।

Comments

আপনি কি width:autoকোনও inputক্ষেত্রে প্রয়োগের সম্পূর্ণ উদাহরণ পোস্ট করতে পারেন ?

— জাকুবিসজন

শুধুমাত্র উত্তর অর্ধেক। উপাদানগুলির ডিফল্ট অবস্থান স্থিতিশীল, সুতরাং বাম এবং ডান এখানে ঠিক কিছুই করবে না। এবং প্রস্থের

— অটোও

Answer 7

আপনি কিছু অবস্থানের কৌশল চেষ্টা করতে পারেন। আপনি ইনপুটটি একটি ডিভ position: relativeএবং একটি নির্দিষ্ট উচ্চতার সাথে রাখতে পারেন, তারপরে position: absolute; left: 0; right: 0;ইনপুটটিতে এবং আপনার পছন্দ মতো কোনও প্যাডিং রাখতে পারেন।

সরাসরি উদাহরণ

Comments

আপনি কোন ব্রাউজারে এটি পরীক্ষা করেছেন? :(

— ত্রিশত

হুঁ, কেবল ক্রোমে কাজ করে। তবে আমি জানি আমি এফএফ এবং আইই তেও কাজ করার মতো কিছু পেয়েছি।

— ফেলিক্স

দেখে মনে হচ্ছে এটি <input>ফায়ারফক্সের উপাদানগুলির সাথে কাজ করছে না (আইডিকে আইডিকে)। <div>যদিও এটি এস এর সাথে কাজ করে । এবং না, display: blockএটি <input>

— ফেলিক্স

Answer 8

এখানে কোডন্ট্রাক.কমের প্রস্তাবনা রয়েছে , যার সমাধানের ভাল উদাহরণ রয়েছে:

ডিভের প্রস্থটি 100% এ সেট করার পরিবর্তে এটি অটোতে সেট করুন এবং নিশ্চিত হয়ে নিন যে এটি <div>প্রদর্শিত হবে: ব্লক (এর জন্য ডিফল্ট <div>)।

Comments

আপনার সরাসরি লিঙ্ক পোস্ট করা উচিত নয়। আপনি এই লিঙ্ক থেকে তথ্য অন্তর্ভুক্ত করতে পারেন। কারণ হ'ল, আগামীকাল হতে পারে সেই লিঙ্কটি উপলভ্য হবে না এবং আপনার উত্তরটি আর কার্যকর হবে না ..

— অম্নেশ গোয়েল

Answer 9

ইনপুট বাক্সের প্যাডিংটিকে একটি মোড়কের উপাদানটিতে সরান।

<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>

<div class="outer">
    <div class="inner">
       <input/>
    </div>
</div>

এখানে উদাহরণ দেখুন: http://jsfiddle.net/L7wYD/1/

Answer 10

প্রস্থের মধ্যে পার্থক্যটি কেবল বুঝুন: অটো; এবং প্রস্থ: 100%; প্রস্থ: স্বয়ংক্রিয়; প্যাডিং সহ মোড়ক ডিভিওয়ের সাথে সঠিকভাবে প্রদত্ত মান যথাযথভাবে প্রস্থের গণনা করবে A প্রস্থ 100% প্রস্থকে প্রসারিত করে এবং প্যাডিং যুক্ত করে।

Comments

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

— মিস্টার লিস্টার

Answer 11

এটি একটি পাত্রে মোড়ানো সম্পর্কে কি? ধারক জোরে শৈলীর মতো থাকে:

{
    width:100%;
    border: 10px solid transparent;
}

Answer 12

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

width: 100%;
box-sizing: border-box;

Answer 13

আমার জন্য, ব্যবহার করে margin:15px;padding:10px 0 15px 23px;width:100%, ফলাফলটি ছিল:

আমার জন্য সমাধানটি width:autoপরিবর্তে ব্যবহার করা হয়েছিল width:100%। আমার নতুন কোডটি ছিল:

margin:15px;padding:10px 0 15px 23px;width:auto। তারপরে উপাদানটি সঠিকভাবে সারিবদ্ধ:

Answer 14

আমারও একই প্রশ্ন ছিল. এটি ঠিক মত এটি ঠিক করুন:

width: 100%;
box-sizing: border-box;

Answer 15

তুমি এটি করতে পারো:

width: auto;
padding: 20px;

Comments

এটি একই 100% - মার্জিন নয়।

— জেমস