Как да подравните неподреден списък в HTML

Автор: John Stephens
Дата На Създаване: 1 Януари 2021
Дата На Актуализиране: 5 Ноември 2024
Anonim
HTML: Lists | Intro to HTML/CSS: Making webpages | Computer Programming | Khan Academy
Видео: HTML: Lists | Intro to HTML/CSS: Making webpages | Computer Programming | Khan Academy

Съдържание

Уеб дизайнерите използват списъци „неупоменати“ или „отметки“ за повече от просто добавяне на отметки и текст. HTML тагът, използван за създаване на неупоменати списъци, е полезен за създаване на менюта и организиране на изображения, за да може JavaScript да се зареди в презентация. Да се ​​научим да използваме CSS (Cascading Style Sheet) заедно с тези списъци ще отвори много възможности за уеб дизайн. Изравняването на нерегламентираните списъци е много важно умение за подобряване.


инструкции

Използвайте CSS кода, за да подравните неподредените списъци в HTML (Jupiterimages / Photos.com / Getty Images)

  1. Отворете HTML файла, който съдържа неупоменатия списък и прегледайте маркерите и , в горната част на кода. Добавете маркери> и ако вече не са налице. Ако вашият код включва етикет

  2. някъде след него и съдържа препратка към CSS файл, отворете го. Вашият CSS код ще премине между> и или в нов ред на вашия CSS файл.

  3. Подравнете текста в отметките, като зададете свойството „text-align“ на маркера

      , Това включва маркерите
    • и
      • да ги дефинирате като част от един списък. Когато подравните текста в маркера
        , всички елементи в списъка ще бъдат засегнати, но не и самият списък отляво или отдясно на страницата. Пример за използване на CSS код за задаване на свойство "text-align", използвайте "ul {text-align: right;}". Обърнете внимание, че маркерите няма да се движат с текста. В този случай те ще бъдат отляво.

  4. Подравнете целия списък отляво или отдясно на страницата, като зададете свойството "float" на маркера

      , Това свойство засяга целия списък, като го премества наляво или надясно на страницата. Напишете кода "ul {float: right;}".

      Можете да зададете това свойство наляво или надясно, но не и в центъра.


  5. Огърнете маркерите си

      с етикети и да създадете обвивка, която ще центрира списъка на страницата. Кодът ще изглежда така: "
      • Елемент от списък
      • Елемент от списък
      '.

      Маркерът няма да подравни нищо само по себе си; трябва да използвате CSS, за да центрирате всичко. Добавете следния код между> таговете или във вашия CSS файл, за да центрирате списъка: "div {display: block; text-align: center;} ul {display: inline-block; text-align: left;}".