CSS kengligi: yorliqda ishlamaydi

CSS kengligini sinash uchun oddiy shakl yozdim. Kenglik kiritilgan qiymatdan qat'iy nazar, chegaralar hali ham bir xil kenglikga ega. Kimdir meni yo'qotishimga yordam berishi mumkinmi?


  <meta charset="UTF-8">
    <head>
      
  
      <title>Trying CSS </title>  
    </head>  

    <body>
      <form  action="#">  
        
<input type="text"/> <input type="text" /> <input type="text" /> <button type="button">Submit </button>
   
      </form>
    </body>
 </html>
0
Nima uchun float ishni uddalashini so'rashim mumkinmi?
qo'shib qo'ydi muallif TimeToCodeTheRoad, manba
Yorliq yorlig'i sukut display: inline; , shuning uchun kenglik hech qanday ishlamaydi. Siz uni quyidagicha sozlashingiz mumkin: display: inline-block; yoki display: block; . holati: absolyut | sobit , float: chap | o'ng ham ishlashi mumkin, lekin ularni faqat kerakli deb bilsangiz foydalanishingiz mumkin.
qo'shib qo'ydi muallif shuizhongyuemin, manba

6 javoblar

Ushbu CSS-dan foydalaning

label {  
width: 10em;  
border-color: brown;  
border-width: .25em;  
border-style: double;  
margin-right: .5em;      
float:left;
}
input{float:left;}

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<!DOCTYPE HTML>
<!--Inform the Browser that the document is HTML-->

<head>
<meta charset="UTF-8">
<head>
  
<title>Trying CSS </title>  
</head>  
<body>
<form  action="#">  
<input type="text"/> <input type="text" /> <input type="text" /> <button type="button">Submit </button>
   
</form>
</body>
</html>
</div> </div>

1
qo'shib qo'ydi
Label elementi indikativ ekran holatiga sukutlangan. Inline elementlar width xususiyatini qabul qilmaydi
qo'shib qo'ydi muallif user7357089, manba
float istamang: chapdan ekranni ishlatishingiz mumkin: blok
qo'shib qo'ydi muallif user7357089, manba
Agar chindan ham sizga yordam berilsa, javobimni qabul qiling
qo'shib qo'ydi muallif user7357089, manba
float: chapda ko'rsatuv inline holatini tushiradi
qo'shib qo'ydi muallif user7357089, manba
Nima uchun float qo'shding ?: chap? Bundan tashqari, nima uchun kenglik o'zi ishlamayotganini tushunishga intilaman
qo'shib qo'ydi muallif TimeToCodeTheRoad, manba
ajoyib, shuningdek, floatni blokli ekranga o'zgartiradimi? Men ekranni qanday qo'shishni tushunaman: blok yordam beradi
qo'shib qo'ydi muallif TimeToCodeTheRoad, manba
qabul qilinsa, iltimos, nima uchun float ham ishlayotganini menga xabar bera olasizmi?
qo'shib qo'ydi muallif TimeToCodeTheRoad, manba

Sizning talabingiz bo'yicha etiketlash uchun yana bitta uslubni qo'shing

display: "inline-block"

yoki

display: "block"
0
qo'shib qo'ydi

Kenglik o'rniga Paddingdan foydalaning

label {  
padding: 0 55px;  
border-color: brown;  
border-width: .5em;  
border-style: double;  
margin-right: .5em;      
}
0
qo'shib qo'ydi
<div class="labelborder">
     
</div>
.labelborder {  
width: 10em;  
border-color: brown;  
border-width: .25em;  
border-style: double;  
margin-right: .5em;      
}

Agar kirish kengligi shrift hajmiga mos keladigan bo'lsa, shrift hajmini oshirmasdan oshirish kerak bo'lsa, yuqoridagi kodni ishlatib,

0
qo'shib qo'ydi

Kenglik kiritish uchun yorliqqa display: inline-block ni qo'shing

0
qo'shib qo'ydi

Aslida sanasi yorliq. Shunday qilib, siz nima qilishingiz kerakligini tag yorlig'i ichida sinf qo'yishadi va keyin CSS uchun yozishingiz kerak. va kengligi uchun harakat qilib ko'ring - kenglik = 100%

0
qo'shib qo'ydi