বলি আমার কাছে একটি পাঠ্য বাক্স রয়েছে যা আমি একটি সম্পূর্ণ লাইন পূরণ করতে চাই। আমি এটিকে এর মতো একটি স্টাইল দেব:
input.wide {display:block; width: 100%}এটি সমস্যা সৃষ্টি করে কারণ প্রস্থটি পাঠ্য বাক্সের সামগ্রীর উপর ভিত্তি করে। পাঠ্য বাক্সগুলিতে মার্জিন, সীমানা এবং প্যাডিং রয়েছে ডিফল্ট হিসাবে, যা এটি তার ধারক থেকে 100% প্রস্থের পাঠ্য বাক্সকে আরও বড় করে তোলে।
উদাহরণস্বরূপ, এখানে ডানদিকে:
কোনও পাঠ্য বাক্সের প্রসারকে প্রসারিত না করে এর ধারকটির প্রস্থ পূরণ করার কোনও উপায় আছে কি?
আমার অর্থটি বোঝাতে এখানে কিছু উদাহরণ এইচটিএমএল:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
#outer{border: 1px solid #000; width: 320px; margin: 0px;padding:0px}
#inner{margin: 20px; padding: 20px; background: #999;border: 1px solid #000;}
input.wide {display:block; margin: 0px}
input.normal {display:block; float: right}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<input type="text" class="wide" />
<input type="text" class="normal" />
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>
যদি এটি চালানো হয় তবে আপনি "সাধারণ" পাঠ্য বাক্সটি দেখে দেখতে পারেন যে "প্রশস্ত" পাঠ্য বাক্সটি ধারকটির বাইরে স্টিক করে চলেছে। "সাধারণ" পাঠ্য বাক্সটি ধারকটির আসল প্রান্তে ভাসমান। আমি চেষ্টা করছি "প্রশস্ত" পাঠ্য বাক্সটি "সাধারণ" পাঠ্য বাক্সের মতো প্রান্তের বাইরে প্রসারিত না করে, তার ধারকটি পূরণ করুন।