cari
Rumahhujung hadapan webhtml tutorialHTML中的<UL>标签中li横向排列

HTML中的<UL>标签中li横向排列

Jun 27, 2017 pm 01:26 PM
htmlsusunanMendatar

第一步、编写横向菜单的HTML代码架构

请将以下代码添加到HTML文档的导航栏区域中。

<ul id="menu">
 <li><a href="http://www.baidu.com">Baidu.Com</a></li>
 <li><a href="http://www.Code52.Net">Code52.Net</a></li>
 <li><a href="http://www.yahoo.com">Yahoo.Com</a></li>
 <li><a href="http://www.google.com" class="last">Google.Com</a></li>
</ul>

第二步、编写CSS代码

1、设置公共样式

请将以下CSS代码添加到HTML文档的...标签范围中。

<style type="text/css">
#menu { 
font:12px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */
}
#menu, #menu li {
list-style:none; /* 将默认的列表符号去掉 */
padding:0; /* 将默认的内边距去掉 */
margin:0; /* 将默认的外边距去掉 */
}
</style>

大家都知道,

    中的各条目
  • 默认都是纵向排列的,我们需要定义CSS来让其横向排列起来。

    Tips:因为我们现在将导航栏拉出来独立讲解,所以需要设置一些公共样式,如果您在 body 或其他地方已经重设了默认效果,以上代码可以去掉

    2、让文字横排

    大家都知道,

      标签下的项目
    • 默认是纵向排列的,我们需要定义额外的CSS属性让其横向排列。

      <style type="text/css">
      #menu li { 
      float:left; /* 往左浮动 */
      }
      </style>

      3、设置链接样式:

      <style type="text/css">
      #menu li a {
      display:block; /* 将链接设为块级元素 */
      padding:8px 50px; /* 设置内边距 */
      background:#3A4953; /* 设置背景色 */
      color:#fff; /* 设置文字颜色 */
      text-decoration:none; /* 去掉下划线 */
      border-right:1px solid #000; /* 在左侧加上分隔线 */
      }
      </style>

      我们用内边距(即填充padding)的方式,让每个菜单变得宽一些,如果你的菜单是中英文混排的,建议设置单个菜单的高宽,这样可以避免中英文字符行高不一致导致的高度误差。设置固定高度的方式:

      <style type="text/css">
      #menu li a {
      display:block; /* 将链接设为块级元素 */
      width:150px; /* 设置宽度 */
      height:30px; /* 设置高度 */
      line-height:30px; /* 设置行高,将行高和高度设置同一个值,可以让单行文本垂直居中 */
      text-align:center; /* 居中对齐文字 */
      background:#3A4953; /* 设置背景色 */
      color:#fff; /* 设置文字颜色 */
      text-decoration:none; /* 去掉下划线 */
      border-right:1px solid #000; /* 在左侧加上分隔线 */
      }
      </style>

      4、链接悬停效果:

      通过以上几步的综合作用,一个横向导航栏的初步框架就出现了。此步主要是定义链接的悬停效果,让导航栏更美观。当然,如果要让导航栏更炫丽,你可以在CSS悬停属性上定义背景图片。

      <style type="text/css">
      #menu li a:hover {
      background:#146C9C; /* 变换背景色 */
      color:#fff; /* 变换文字颜色 */
      }
      </style>

      这里的代码一个缺陷,最右边会多出来一个边框,由于 :first-child 伪类不被IE系列浏览器所支持,我们只能单独写一个样式,将最后一个边框去掉,同时要给 HTML 代码增加一个额外选择符。

      <ul id="menu">
      <li><a href="http://www.baidu.com">Baidu.Com</a></li>
      <li><a href="http://www.Code52.Net">Code52.Net</a></li>
      <li><a href="http://www.yahoo.com">Yahoo.com</a></li>
      <li><a href="http://www.google.com" class="last">Google.com</a></li>
      </ul>
      
      <style type="text/css">
      #menu li a.last {
      border-right:0; /* 去掉左侧边框 */
      }
      </style>

      好了,到这里一个简单的横向导航菜单就制作完成了,是不是很简单? 下面给出完整代码:

      <style type="text/css">
      #menu { 
       font:12px verdana, arial, sans-serif; 
      }
      #menu, #menu li {
       list-style:none;
       padding:0;
       margin:0;
      }
      #menu li { 
       float:left; 
      }
      #menu li a {
       display:block;
       /* 如果是中英文混排的文字,建议用固定宽度
       width:150px;
       height:30px;
       line-height:30px;
       text-align:center;
       */
       padding:8px 50px;
       background:#3A4953;
       color:#fff;
       text-decoration:none;
       border-right:1px solid #000;
      }
      #menu li a:hover {
       background:#146C9C;
       color:#fff;
       text-decoration:none;
       border-right:1px solid #000;
      }
      #menu li a.last {
       border-right:0; /* 去掉左侧边框 */
      }
      </style>

      你可以查看我们制作的在线演示和下载本文提供的实例包。

      上面的CSS样式,我修改了一下。如下:

      Atas ialah kandungan terperinci HTML中的<UL>标签中li横向排列. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
HTML vs CSS vs JavaScript: Gambaran Keseluruhan PerbandinganHTML vs CSS vs JavaScript: Gambaran Keseluruhan PerbandinganApr 16, 2025 am 12:04 AM

Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: HTML bertanggungjawab untuk struktur kandungan, CSS bertanggungjawab untuk gaya, dan JavaScript bertanggungjawab untuk tingkah laku dinamik. 1. HTML mentakrifkan struktur laman web dan kandungan melalui tag untuk memastikan semantik. 2. CSS mengawal gaya laman web melalui pemilih dan atribut untuk menjadikannya cantik dan mudah dibaca. 3. JavaScript mengawal tingkah laku laman web melalui skrip untuk mencapai fungsi dinamik dan interaktif.

HTML: Adakah bahasa pengaturcaraan atau yang lain?HTML: Adakah bahasa pengaturcaraan atau yang lain?Apr 15, 2025 am 12:13 AM

Htmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworkswithcssforstylingandjavascriptforinteractivity, meningkatkan pembangunan semula.

HTML: Membina struktur laman webHTML: Membina struktur laman webApr 14, 2025 am 12:14 AM

HTML adalah asas struktur laman web bangunan. 1. HTML mentakrifkan struktur kandungan dan semantik, dan penggunaan, dan sebagainya. 2. Menyediakan penanda semantik, seperti, dan sebagainya, untuk meningkatkan kesan SEO. 3. Untuk merealisasikan interaksi pengguna melalui tag, perhatikan pengesahan bentuk. 4. Gunakan elemen lanjutan seperti, digabungkan dengan JavaScript untuk mencapai kesan dinamik. 5. Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan, dan alat pengesahan diperlukan. 6. Strategi pengoptimuman termasuk mengurangkan permintaan HTTP, memampatkan HTML, menggunakan tag semantik, dll.

Dari teks ke laman web: Kekuatan HTMLDari teks ke laman web: Kekuatan HTMLApr 13, 2025 am 12:07 AM

HTML adalah bahasa yang digunakan untuk membina laman web, menentukan struktur laman web dan kandungan melalui tag dan atribut. 1) HTML menganjurkan struktur dokumen melalui tag, seperti,. 2) Penyemak imbas menghancurkan HTML untuk membina DOM dan menjadikan laman web. 3) Ciri -ciri baru HTML5, seperti, meningkatkan fungsi multimedia. 4) Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan. 5) Cadangan pengoptimuman termasuk menggunakan tag semantik dan mengurangkan saiz fail.

Memahami HTML, CSS, dan JavaScript: Panduan PemulaMemahami HTML, CSS, dan JavaScript: Panduan PemulaApr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

Peranan HTML: Penstrukturan Kandungan WebPeranan HTML: Penstrukturan Kandungan WebApr 11, 2025 am 12:12 AM

Peranan HTML adalah untuk menentukan struktur dan kandungan laman web melalui tag dan atribut. 1. HTML menganjurkan kandungan melalui tag seperti, menjadikannya mudah dibaca dan difahami. 2. Gunakan tag semantik seperti, dan lain -lain untuk meningkatkan kebolehcapaian dan SEO. 3. Mengoptimumkan kod HTML boleh meningkatkan kelajuan pemuatan laman web dan pengalaman pengguna.

HTML dan Kod: Melihat lebih dekat pada istilahHTML dan Kod: Melihat lebih dekat pada istilahApr 10, 2025 am 09:28 AM

Htmlisaspecifictypeofcodefocusedonstructuringwebcontent, manakala "kod" secara meluas ini

HTML, CSS, dan JavaScript: Alat penting untuk pemaju webHTML, CSS, dan JavaScript: Alat penting untuk pemaju webApr 09, 2025 am 12:12 AM

HTML, CSS dan JavaScript adalah tiga tiang pembangunan web. 1. HTML mentakrifkan struktur laman web dan menggunakan tag seperti, dan sebagainya. 2. CSS mengawal gaya laman web, menggunakan pemilih dan atribut seperti warna, saiz font, dan lain-lain.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

MantisBT

MantisBT

Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.

SublimeText3 versi Inggeris

SublimeText3 versi Inggeris

Disyorkan: Versi Win, menyokong gesaan kod!

mPDF

mPDF

mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),