css - enabled - كس جعل مربع النص ملء كل العرض المتاحة



css selector class ends with (5)

الطريقة الوحيدة التي أرى أنها ممكنة مع جافا سكريبت، حتى تحصل على عرض ديف (بالبكسل)، خصم الحجم الحالي من عناصر التحكم الأخرى وإضافة النتيجة كما هو الحال مع الإدخال. وهذا يتطلب منك وضع النص داخل السيطرة على فترة (حتى تتمكن من الحصول على حجمه).

لدي "خط" التالي في صفحتي على الويب

<div style="width:100%">
"Some Text" <DropDown> "Some more text" <TextBox> <Button> <Button>
</div>

السيطرة المنسدلة ليس لدي حقا السيطرة على العرض، كما أنها الأحجام لتناسب أي قيمة الخيار الأطول هو. الأزرار هي عرض ثابت. كيف يمكنني الحصول على مربع النص لملء كل ما تبقى من العرض المتبقي؟

حاولت وضعه في جدول ولكن واجهت نفس المشكلة، أي كيف يمكنني جعل جميع الأعمدة الأخرى صغيرة قدر الإمكان لتناسب محتواها ثم ملء مربع النص عرض المتبقية؟

حلول هاكي على ما يرام إذا لزم الأمر، لقد منذ فترة طويلة التخلي عن أي ادعاء حتى العناية بمعايير كس عندما يكون من الصعب جدا أن تفعل أبسط شيء.

تحرير : لتوضيح، بواسطة تكستبوكس أعني <input type="text"/>


Answer #1

تعيين عرض textbox إلى 100٪ مع display: inline; خاصية كس display: inline; ؟


Answer #2

يمكنك تعيين عرض مربع النص إلى 100٪ (مع كس مثلما فعلت مع ديف)، لذلك سوف تمتد إلى أقصى حد من الوالد (على افتراض أن الوالد الوسم يمتد كامل الشاشة).


Answer #3

هنا هو ما عملت بالنسبة لي. لاحظ أنه في بعض الحالات اضطررت إلى استخدام &nbsp; بين البنود خلاف ذلك سقط إلى السطر التالي.

.flexContainer {
    display: flex;
    width:100%;
}
input {
    width: 100%;
}
<div class="flexContainer">
<span>text:&nbsp;</span> <input/> &nbsp; <label>text</label>
</div>


Answer #4

هذا غير قابل للتنفيذ في كس بقدر ما يتعلق كروم. الطريقة الممكنة هي من خلال التلاعب سمة الحجم من عنصر تحكم النموذج من خلال جافا سكريبت. إذا كان طول السلسلة 25، إضافة إضافية من 10 على الأقل للتخليص.

HTML

<!-- "The quick brown fox jumps over the lazy dog" is 43 characters long -->
<input type="text" value="The quick brown fox jumps over the lazy dog" id="textbox1" />

جافاسكريبت / جكري

<script>
    var value = jQuery('#textbox1').val();                  // 43
    jQuery('#textbox1').attr('size', value.length + 10 );   // resizes the textbox
</script>

وهناك خيار آخر أيضا من قبل حساب حجم ما قبل النصي في نهاية الخلفية.

فب / هتمل

<?php
$value = "The quick brown fox jumps over the lazy dog";
?>
<input type="text" value="<?php echo $value; ?>" size="<?php echo ( strlen($value) + 10 ); ?>" />




width