ورود

View Full Version : تغییر سایز Input بر اساس div


IMANAZADI
جمعه 15 بهمن 1395, 08:17 صبح
سلام

یک div داریم که 60 درصد کل صفحه عرض دارد

داخل این div تعدادی input داریم

حالا میخوام زمانی که صفحه resize میشه input های درون div بر اساس اون resize بشه (یعنی اگه صفحه بزرگتر شد عرض input ها هم بزرگتر شه و برعکس)

نکته بعدی نمیخوام inputها از سایز div تجاوز نکنه و به خط بعد هم منتقل بشه







.c
{
width:60%;
margin:0 auto;
border:1px solid;
white-space:nowrap;
height:30px;

}



<div class="c" style="">


<input type="text" value="test" class="" style="">
<input type="text" value="test" class="" style="">
<input type="text" value="test" class="" style="">
<input type="text" value="test" class="" style="">
<input type="text" value="test" class="" style="">
<select name="" id="" class="a" style="">
<option value="">a</option>
<option value="">b</option>
<option value="">cerere</option>
<option value="">dwwwwwwwwww</option>


</select>
<button>clickkk</button>


</div>
سعید کشاورز
جمعه 15 بهمن 1395, 10:35 صبح
خب شما به تگ های Input
width:100% بده مشکلت حل میشه حالا اینی که گفتم میوفته زیر هم...
اگه نمیخای زیر هم بیوفته باید % رو جوری بدی همه Input ها جا بشن..
IMANAZADI
شنبه 16 بهمن 1395, 06:18 صبح
دوست عزیز اینکارم کردم نشد

نمیدونم مشکلش چیه





<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>




<style>
*
{
margin:0;
padding:0;
}


.c
{
width:60%;
margin:0 auto;
border:1px solid;
white-space:nowrap;
height:30px;

}






</style>
</head>


<body>


<br><br><br><br>




<div class="c" style="">




<input type="text" value="test" class="" style="width:20%;">
<input type="text" value="test" class="" style="width:20%;">
<input type="text" value="test" class="" style="width:20%;">
<input type="text" value="test" class="" style="width:10%;">
<input type="text" value="test" class="" style="width:10%;">
<select name="" id="" class="a" style="width:10%;">
<option value="">a</option>
<option value="">b</option>
<option value="">cerere</option>
<option value="">dwwwwwwwwww</option>


</select>
<button style="width:5%;">clickkk</button>




</div>


</body>
</html>