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

CSSを使用して右側にリストアイテムをフロートする

リストアイテムを右にフロートさせるには、CSSのfloat：rightプロパティを使用します。次のコードを実行して実装してみてください

例

<!DOCTYPE html>
<html>
   <head>
      <style>
         ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
         }
         li {
            float: left;
         }
         li a {
            display: block;
            padding: 8px;
            background-color: orange;
         }
      </style>
   </head>

   <body>
      <ul>
         <li><a href = "#home">Home</a></li>
         <li><a href = "#news">News</a></li>
         <li style = "float:right"><a href = "#contact">Contact</a></li>
         <li style = "float:right"><a href = "#about">About</a></li>
      </ul>
   </body>
</html>

  1. コンテナの中央にあるフレックスアイテムをCSSに揃えます

    justify-contentを使用する 値がcenterのプロパティ フレックスアイテムを中央に揃えます。 例 次のコードを実行して、中心値を実装してみてください <!DOCTYPE html> <html>    <head>       <style>          .mycontainer {             display: flex;    

  2. CSSのfloatプロパティを使用した左右の配置

    ボックスまたはコンテンツの配置またはフォーマットに使用されるCSSFloatプロパティを使用して、htmlの要素を整列させることができます。開発者は、CSSフロートを使用して要素を左また​​は右に配置できます。 例 要素を整列させるためのCSSfloatプロパティの例を見てみましょう- <!DOCTYPE html> <html> <head> <title>Alignment using CSS Float</title> <style> .screen {    padding: 10px; &n