HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLとCSSを使用して、テキストと選択ボックスを同じ幅に揃えます

CSSで要素の幅と高さを設定すると、要素が実際のサイズよりも大きく表示されることがよくあります。これは、デフォルトでは、要素の幅と高さにパディングと境界線が追加されてから、要素が表示されるためです。

ボックスサイズ設定プロパティには、要素が実際のサイズより大きく表示されないように、要素のパディングと境界線が実際の幅と高さで含まれています。このプロパティを使用する形式は「box-sizing：box-border」

です。 例

次のコードを実行して、テキストを揃え、ボックスを同じ幅に選択することができます-

<html>
   <head>
      <style>
         input, select {
            width: 250px;
            border: 2px solid #000;
            padding: 0;
            margin: 0;
            height: 22px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
         }
         input {
            text-indent: 3px;
         }
      </style>
   </head>
   <body>
      <input type = "text" value = "Name of Candidate"><br>
      <select>
         <option>Select Choice</option>
         <option>Student</option>
         <option>Teachers</option>
         <option>Head</option>
      </select>
   </body>
</html>

  1. HTMLとCSSを使用して画像の上にテキストを配置するにはどうすればよいですか？

    以下は、HTMLとCSSを使用して画像上にテキストを配置するためのコードです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> h1{    text-align: center; } .imageContainer {    margin-left:36%;    d

  2. 要素の幅をHTMLで設定します

    幅を使用 要素の幅を設定するHTMLの属性。この属性は、、、、、などの要素で使用できます。 例 次のコードを実行して、幅を実装してみてください。 HTMLの属性- <!DOCTYPE HTML> <html>    <body>       <video width="300" height="200" controls autoplay>          <source src = "/