هل هناك طريقة بسيطة لجعل منطقة نص HTML ونص نوع الإدخال متساويين في العرض؟

StackOverflow https://stackoverflow.com/questions/28713

  •  09-06-2019
  •  | 
  •  

سؤال

هل هناك طريقة بسيطة للحصول على منطقة نص HTML ونوع الإدخال = "نص" لعرضهما بعرض متساوٍ (تقريبًا) (بالبكسل)، ويعمل في متصفحات مختلفة؟

سيكون حل CSS/HTML رائعًا.أفضل عدم الاضطرار إلى استخدام Javascript.

شكرا /إريك

هل كانت مفيدة؟

المحلول

يجب أن تكون قادرًا على الاستخدام

.mywidth {
  width: 100px;   
}
<input class="mywidth">
<textarea class="mywidth"></textarea>

نصائح أخرى

للإجابة على السؤال الأول (رغم أنه تم الإجابة عليه حتى الموت):عرض CSS هو ما تحتاجه.

لكني أردت الإجابة سؤال غايوس في الإجابات.جايوس، مشكلتك هي أنك تقوم بتعيين العرض في em.يعد هذا تفكيرًا جيدًا ولكن عليك أن تتذكر أن em يعتمد على حجم الخط.بشكل افتراضي، تحتوي منطقة الإدخال ومنطقة النص على وجوه وأحجام خطوط مختلفة.لذلك عندما تقوم بتعيين العرض على 35em، فإن منطقة الإدخال تستخدم عرض الخط الخاص بها ومنطقة النص تستخدم عرض الخط الخاص بها.الخط الافتراضي لمنطقة النص أصغر، وبالتالي يكون مربع النص أصغر.إما أن تقوم بتعيين العرض بالبكسل أو النقاط، أو التأكد من أن مربعات الإدخال ومناطق النص لها نفس وجه الخط وحجمه:

.mywidth {
  width: 35em;
  font-family: Verdana;
  font-size: 1em;
}
<input type="text" class="mywidth"/><br/>
<textarea class="mywidth"></textarea>

امل ان يساعد.

وقد ذكر هذا غيره ثم حذفه.إذا كنت تريد تصميم جميع مناطق النص ومدخلات النص بنفس الطريقة دون الفئات، فاستخدم لغة CSS التالية (لا تعمل في IE6):

input[type=text], textarea { width: 80%; }

هذا سؤال CSS:يتضمن العرض عرض الحدود والحشوة، والتي لها إعدادات افتراضية مختلفة لـ INPUT وTEXTAREA في متصفحات مختلفة، لذا اجعلها متماثلة أيضًا:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width</title>
<style type="text/css">
textarea, input { padding:2px; border:2px inset #ccc; width:20em; }
</style>
</head>
<body>
<p><input/><br/><textarea></textarea></p>
</body>
</html>

هذا موصوف في أبعاد الصندوق قسم مواصفات CSS، والذي يقول:

يتم تحديد عرض المربع من خلال مجموع الهوامش اليمنى واليسرى، والحدود، والحشوة، وعرض المحتوى.

استخدم CSS3 لجعل مربع النص والإدخال يعملان بنفس الطريقة.يرى jsFiddle.

.textarea, .textbox {
    width: 200px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

نعم هنالك.حاول القيام بشيء مثل هذا:

<textarea style="width:80%"> </textarea>
<input type="text" style="width:80%" />

كلاهما يجب أن يساوي نفس الحجم.يمكنك القيام بذلك باستخدام الأحجام المطلقة (px) أو الأحجام النسبية (em) أو الأحجام المئوية.

مجرد ملاحظة - يتأثر العرض دائمًا بشيء يحدث من جانب العميل - لا يمكن لـ PHP التأثير على هذه الأنواع من الأشياء.

يعد تعيين فئة مشتركة على العناصر وتعيين العرض في CSS هو الرهان الأنظف.

استخدم فئة CSS للعرض، ثم ضع عناصرك في HTML DIVs، DIVs التي تحتوي على الفئة المذكورة.

بهذه الطريقة، يجب أن يكون التحكم في التخطيط أفضل بشكل عام.

كما ذكر في مربع نص Html غير متساوٍ وعرض القائمة المنسدلة مع XHTML 1.0 صارم يعتمد ذلك أيضًا على نوع الوثيقة الخاصة بك.لقد لاحظت أنه عند استخدام XHTML 1.0 الصارم، يظهر الفرق في العرض بالفعل.

input[type="text"] { width: 60%; } 
input[type="email"] { width: 60%; }
textarea { width: 60%; }
textarea { height: 40%; }

في هذه الأيام، إذا كنت تستخدم bootstrap، فما عليك سوى إعطاء حقول الإدخال الخاصة بك form-control فصل.شيء مثل:

<label for="display-name">Display name</label>
<input type="text" class="form-control" name="displayname" placeholder="">

<label for="about-me">About me</label>
<textarea class="form-control" rows="5" id="about-me" name="aboutMe"></textarea>

يمكنك أيضًا استخدام CSS التالي: 

.mywidth{
width:100px;
}
textarea{
width:100px;
}

لغة البرمجة:

<input class="mywidth" >
<textarea></textarea>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top