• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
تغییر سایز Input بر اساس div
#1
سلام

یک 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>
  پاسخ
تشکر شده توسط :
#2
سلام و وقت بخیر

از این استفاده کنین و طبق نیاز تغییرش بدین.

کد پی‌اچ‌پی:
.c input width:25%;} 

ولی اگر class بدین و بصورت ریسپانسیو عمل کنین نتیجه ی بهتری خواهید داشت. ارادتمند
  پاسخ
تشکر شده توسط :
#3
اگر از بوت استرپ استفاده میکنید از کلاس form-control و اگر غیر این استفاده میکنید یک استایل 100% به هر کدوم از اینپوت های خودتون بدید
با این کار هر وقت دایو شما بزرگ و یا کوچیک شد اینپوت های داخل همیشه 100 درصد دایو رو پر میکنن
  پاسخ
تشکر شده توسط : ayoubsys
#4
دوستان بازم نشد

کدها رو ببینید

کد:
<!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>
  پاسخ
تشکر شده توسط : mojtaba79
#5
با این روش شما نمیتونید فیلدهارو رسپانسیو کنید
باید از مدیا گوئری و یا بوت استرپ استفاده کنید برای اینکار
  پاسخ
تشکر شده توسط : mojtaba79


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان