Div标签内的垂直间距

时间：2016-05-19 18:59:51

标签： html css navigationbar divider

我一直在网站上工作，你可以访问许多不同歌曲的信息，包括艺术家，专辑，长度等。在主页上，我有一个固定在屏幕左侧的导航栏（25宽度％）。它有一个主页链接和每个字母的链接（歌曲根据他们的第一个字母按部分组织）。在一个完美的世界里，我希望所有这些链接在这个div中完全垂直，但事实并非如此。当我在不同的屏幕上打开网站时，“Z”下面总有不同数量的“超额”。

导航栏看起来有点像这样：

Home
A
B
C
D
...
Z
(This is where the unused space is)

这是我的代码：

html,
body {
  margin: 0;
}
/* Navigation Menu Styling */

ul.main-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}
ul.main-menu li a {
  display: block;
  color: #000;
  padding: 7.45px 0 7.45px 16px;
  text-decoration: none;
}
ul.main-menu li a.active {
  background-color: #4CAF50;
  color: white;
}
li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
/* Text Styling */

h1,
h2,
p {
  font-family: Calibri
}
p a:link,
p a:visited {
  font-family: Times New Roman;
  color: black;
  text-decoration: none;
}
p a:hover {
  color: red;
}
<ul class="main-menu">
  <li><a class="active" href="#home">Home</a>
  </li>
  <li><a href="#a_songs">A</a>
  </li>
  <li><a href="#b_songs">B</a>
  </li>
  <li><a href="#c_songs">C</a>
  </li>
  <li><a href="#d_songs">D</a>
  </li>
  <li><a href="#e_songs">E</a>
  </li>
  <li><a href="#f_songs">F</a>
  </li>
  <li><a href="#g_songs">G</a>
  </li>
  <li><a href="#h_songs">H</a>
  </li>
  <li><a href="#i_songs">I</a>
  </li>
  <li><a href="#j_songs">J</a>
  </li>
  <li><a href="#k_songs">K</a>
  </li>
  <li><a href="#l_songs">L</a>
  </li>
  <li><a href="#m_songs">M</a>
  </li>
  <li><a href="#n_songs">N</a>
  </li>
  <li><a href="#o_songs">O</a>
  </li>
  <li><a href="#p_songs">P</a>
  </li>
  <li><a href="#q_songs">Q</a>
  </li>
  <li><a href="#r_songs">R</a>
  </li>
  <li><a href="#s_songs">S</a>
  </li>
  <li><a href="#t_songs">T</a>
  </li>
  <li><a href="#u_songs">U</a>
  </li>
  <li><a href="#v_songs">V</a>
  </li>
  <li><a href="#w_songs">W</a>
  </li>
  <li><a href="#x_songs">X</a>
  </li>
  <li><a href="#y_songs">Y</a>
  </li>
  <li><a href="#z_songs">Z</a>
  </li>
</ul>

<div style="margin-left:25%;padding:1px 16px;height:1000px;">
  <h1 id="home">Welcome To Name That Artist</h2>
			 <p> You can find information about a song from the wide selection we offer.</p>
			 <h3>Use the navigation bar to jump to a letter or search for a specific song.</h3>
			 <hr id="a_songs"/><p align="center">A</p><hr/>
				 <div>
					 <p>
						 <a id="all_of_me_john_legend" href="songs/a/All_Of_Me_John_Legend.html">All Of Me - John Legend</a>
						 <a href="songs/a/.html"> </a>
						 <a href="songs/a/.html"> </a>
					 </p>
				 </div>
			 <hr id="b_songs"/><p align="center">B</p><hr/>
				 <div>
					 <p>
						 <a id="bad_blood_bastille" href="songs/b/Bad_Blood_Bastille.html">Bad Blood - Bastille</a>
						 <a href="songs/b/.html"> </a>
						 <a href="songs/b/.html"> </a>
					 </p>
				 </div>
			 <hr id="c_songs"/><p align="center">C</p><hr/>
				 <div>
					 <p>
						 <a id="cake_by_the_ocean_dnce" href="songs/c/Cake_By_The_Ocean_DNCE.html">Cake By The Ocean - DNCE</a>
						 <a href="songs/c/.html"> </a>
						 <a href="songs/c/.html"> </a>
					 </p>
				 </div>
			 <hr id="d_songs"/><p align="center">D</p><hr/>
				 <div>
					 <p>
						 <a id="dont_stop_believin_journey" href="songs/d/Dont_Stop_Believin_Journey.html">Don't Stop Believin' - Journey</a>
						 <a href="songs/d/.html"> </a>
						 <a href="songs/d/.html"> </a>
					 </p>
				 </div>
			 <hr id="e_songs"/><p align="center">E</p><hr/>
				 <div>
					 <p>
						 <a id="eye_of_the_tiger_survivor" href="songs/e/Eye_Of_The_Tiger_Survivor.html">Eye Of The Tiger - Survivor</a>
						 <a href="songs/e/.html"> </a>
						 <a href="songs/e/.html"> </a>
					 </p>
				 </div> 
			 <hr id="f_songs"/><p align="center">F</p><hr/>
				 <div>
					 <p>
						 <a id="feel_good_robin_thicke" href="songs/f/Feel_Good_Robin_Thicke.html">Feel Good - Robin Thicke</a>
						 <a href="songs/f/.html"> </a>
						 <a href="songs/f/.html"> </a>
					 </p>
				 </div>
			 <hr id="g_songs"/><p align="center">G</p><hr/>
				 <div>
					 <p>
						 <a id="geronimo_sheppard" href="songs/g/Geronimo_Sheppard.html">Geronimo - Sheppard</a>
						 <a href="songs/g/.html"> </a>
						 <a href="songs/g/.html"> </a>
					 </p>
				 </div>
			 <hr id="h_songs"/><p align="center">H</p><hr/>
				 <div>
					 <p>
						 <a id="here_alessia_cara" href="songs/h/Here_Alessia_Cara.html">Here - Alessia Cara</a>
						 <a href="songs/h/.html"> </a>
						 <a href="songs/h/.html"> </a>
					 </p>
				 </div>
			 <hr id="i_songs"/><p align="center">I</p><hr/>
				 <div>
					 <p>
						 <a id="i_write_sins_not_tragedies_panic_at_the_disco" href="songs/i/I_Write_Sins_Not_Tragedies_Panic_At_The_Disco.html">I Write Sins Not Tragedies - Panic! At The Disco</a>
						 <a href="songs/i/.html"> </a>
						 <a href="songs/i/.html"> </a>
					 </p>
				 </div>
			 <hr id="j_songs"/><p align="center">J</p><hr/>
				 <div>
					 <p>
						 <a id="just_give_me_a_reason_pink" href="songs/j/Just_Give_Me_A_Reason_Pink.html">Just Give Me A Reason - P!nk</a>
						 <a href="songs/j/.html"> </a>
						 <a href="songs/j/.html"> </a>
					 </p>
				 </div>
			 <hr id="k_songs"/><p align="center">K</p><hr/>
				 <div>
					 <p>
						 <a id="kill_of_the_night_gin_wigmore" href="songs/k/Kill_Of_The_Night_Gin_Wigmore.html">Kill Of The Night - Gin Wigmore</a>
						 <a href="songs/k/.html"> </a>
						 <a href="songs/k/.html"> </a>
					 </p>
				 </div>
			 <hr id="l_songs"/><p align="center">L</p><hr/>
				 <div>
					 <p>
						 <a id="latch_disclosure" href="songs/l/Latch_Disclosure.html">Latch - Disclosure</a>
						 <a href="songs/l/.html"> </a>
						 <a href="songs/l/.html"> </a>
					 </p>
				 </div>
			 <hr id="m_songs"/><p align="center">M</p><hr/>
				 <div>
					 <p>
						 <a id="me_and_my_broken_heart_rixton" href="songs/m/Me_And_My_Broken_Heart_Rixton.html">Me And My Broken Heart - Rixton</a>
						 <a href="songs/m/.html"> </a>
						 <a href="songs/m/.html"> </a>
					 </p>
				 </div>
			 <hr id="n_songs"/><p align="center">N</p><hr/>
				 <div>
					 <p>
						 <a id="the_nights_avicci" href="songs/n/The_Nights_Avicci.html">The Nights - Avicci</a>
						 <a href="songs/n/.html"> </a>
						 <a href="songs/n/.html"> </a>
					 </p>
				 </div>
			 <hr id="o_songs"/><p align="center">O</p><hr/>
				 <div>
					 <p>
						 <a id="on_my_mind_ellie_goulding" href="songs/o/On_My_Mind_Ellie_Goulding.html">On My Mind - Ellie Goulding</a>
						 <a href="songs/o/.html"> </a>
						 <a href="songs/o/.html"> </a>
					 </p>
				 </div>
			 <hr id="p_songs"/><p align="center">P</p><hr/>
				 <div>
					 <p>
						 <a id="paradise_coldplay" href="songs/p/Paradise_Coldplay.html">Paradise - Coldplay</a>
						 <a href="songs/p/.html"> </a>
						 <a href="songs/p/.html"> </a>
					 </p>
				 </div>
			 <hr id="q_songs"/><p align="center">Q</p><hr/>
				 <div>
					 <p>
						 <a href="songs/q/.html"> </a>
						 <a href="songs/q/.html"> </a>
						 <a href="songs/q/.html"> </a>
					 </p>
				 </div>
			 <hr id="r_songs"/><p align="center">R</p><hr/>
				 <div>
					 <p>
						 <a id="rather_be_clean_bandit" href="songs/r/Rather_Be_Clean_Bandit.html">Rather Be - Clean Bandit</a>
						 <a href="songs/r/.html"> </a>
						 <a href="songs/r/.html"> </a>
					 </p>
				 </div>
			 <hr id="s_songs"/><p align="center">S</p><hr/>
				 <div>
					 <p>
						 <a id="secrets_coldplay" href="songs/s/Secrets_Coldplay.html">Secrets - Coldplay</a>
						 <a href="songs/s/.html"> </a>
						 <a href="songs/s/.html"> </a>
					 </p>
				 </div>
			 <hr id="t_songs"/><p align="center">T</p><hr/>
				 <div>
					 <p>
						 <a id="this_is_how_we_do_katy_perry" href="songs/t/This_Is_How_We_Do_Katy_Perry.html">This Is How We Do - Katy Perry</a>
						 <a href="songs/t/.html"> </a>
						 <a href="songs/t/.html"> </a>
					 </p>
				 </div>
			 <hr id="u_songs"/><p align="center">U</p><hr/>
				 <div>
					 <p>
						 <a id="uma_thurman_fall_out_boy" href="songs/u/Uma_Thurman_Fall_Out_Boy.html">Uma Thurman - Fall Out Boy</a>
						 <a href="songs/u/.html"> </a>
						 <a href="songs/u/.html"> </a>
					 </p>
				 </div>
			 <hr id="v_songs"/><p align="center">V</p><hr/>
				 <div>
					 <p>
						 <a id="victorious_panic_at_the_disco" href="songs/v/Victorious_Panic_At_The_Disco.html">Victorious - Panic! At The Disco</a>
						 <a href="songs/v/.html"> </a>
						 <a href="songs/v/.html"> </a>
					 </p>
				 </div>
			 <hr id="w_songs"/><p align="center">W</p><hr/>
				 <div>
					 <p>
						 <a id="want_to_want_me_jason_derulo" href="songs/w/Want_To_Want_Me_Jason_Derulo.html">Want To Want Me - Jason Derulo</a>
						 <a href="songs/w/.html"> </a>
						 <a href="songs/w/.html"> </a>
					 </p>
				 </div>
			 <hr id="x_songs"/><p align="center">X</p><hr/>
				 <div>
					 <p>
						 <a id="xo_the_eden_project" href="songs/x/XO_The_Eden_Project.html">XO - The Eden Project</a>
						 <a href="songs/x/.html"> </a>
						 <a href="songs/x/.html"> </a>
					 </p>
				 </div>
			 <hr id="y_songs"/><p align="center">Y</p><hr/>
				 <div>
					 <p>
						 <a id="you_know_you_like_it_dj_snake" href="songs/y/You_Know_You_Like_It_DJ_Snake.html">You Know You Like It - DJ Snake</a>
						 <a href="songs/y/.html"> </a>
						 <a href="songs/y/.html"> </a>
					 </p>
				 </div>
			 <hr id="z_songs"/><p align="center">Z</p><hr/>
				 <div>
					 <p>
						 <a href="songs/z/.html"> </a>
						 <a href="songs/z/.html"> </a>
						 <a href="songs/z/.html"> </a>
					 </p>
				 </div>
		 </div>

2 个答案:

答案 0 :(得分：1)

你可以在ul上使用display:flex，在li上使用flex:1;，这样他们可以在整个区域均匀地喷洒（或自行收缩）。

编辑：添加额外级别的flexbox以包装屏幕上的所有字母  更新了代码段，DEMO使用和分叉

html,
body {
  margin: 0;
}
/* Navigation Menu Styling */


ul.main-menu {
  display: flex;
  flex-flow: column wrap;
}
ul.main-menu li {
  flex: 1;
  display:flex;
  align-items:center;  
}
ul.main-menu li a {
  padding: 0.25em 0.5em;
  flex:1;
}

/* end flex model */

ul.main-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}
ul.main-menu li a {
  display: block;
  color: #000;
  text-decoration: none;
}
ul.main-menu li a.active {
  background-color: #4CAF50;
  color: white;
}
li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
/* Text Styling */

h1,
h2,
p {
  font-family: Calibri
}
p a:link,
p a:visited {
  font-family: Times New Roman;
  color: black;
  text-decoration: none;
}
p a:hover {
  color: red;
}
<ul class="main-menu">
  <li><a class="active" href="#home">Home</a>
  </li>
  <li><a href="#a_songs">A</a>
  </li>
  <li><a href="#b_songs">B</a>
  </li>
  <li><a href="#c_songs">C</a>
  </li>
  <li><a href="#d_songs">D</a>
  </li>
  <li><a href="#e_songs">E</a>
  </li>
  <li><a href="#f_songs">F</a>
  </li>
  <li><a href="#g_songs">G</a>
  </li>
  <li><a href="#h_songs">H</a>
  </li>
  <li><a href="#i_songs">I</a>
  </li>
  <li><a href="#j_songs">J</a>
  </li>
  <li><a href="#k_songs">K</a>
  </li>
  <li><a href="#l_songs">L</a>
  </li>
  <li><a href="#m_songs">M</a>
  </li>
  <li><a href="#n_songs">N</a>
  </li>
  <li><a href="#o_songs">O</a>
  </li>
  <li><a href="#p_songs">P</a>
  </li>
  <li><a href="#q_songs">Q</a>
  </li>
  <li><a href="#r_songs">R</a>
  </li>
  <li><a href="#s_songs">S</a>
  </li>
  <li><a href="#t_songs">T</a>
  </li>
  <li><a href="#u_songs">U</a>
  </li>
  <li><a href="#v_songs">V</a>
  </li>
  <li><a href="#w_songs">W</a>
  </li>
  <li><a href="#x_songs">X</a>
  </li>
  <li><a href="#y_songs">Y</a>
  </li>
  <li><a href="#z_songs">Z</a>
  </li>
</ul>

<div style="margin-left:25%;padding:1px 16px;height:1000px;">
  <h1 id="home">Welcome To Name That Artist</h2>
			 <p> You can find information about a song from the wide selection we offer.</p>
			 <h3>Use the navigation bar to jump to a letter or search for a specific song.</h3>
			 <hr id="a_songs"/><p align="center">A</p><hr/>
				 <div>
					 <p>
						 <a id="all_of_me_john_legend" href="songs/a/All_Of_Me_John_Legend.html">All Of Me - John Legend</a>
						 <a href="songs/a/.html"> </a>
						 <a href="songs/a/.html"> </a>
					 </p>
				 </div>
			 <hr id="b_songs"/><p align="center">B</p><hr/>
				 <div>
					 <p>
						 <a id="bad_blood_bastille" href="songs/b/Bad_Blood_Bastille.html">Bad Blood - Bastille</a>
						 <a href="songs/b/.html"> </a>
						 <a href="songs/b/.html"> </a>
					 </p>
				 </div>
			 <hr id="c_songs"/><p align="center">C</p><hr/>
				 <div>
					 <p>
						 <a id="cake_by_the_ocean_dnce" href="songs/c/Cake_By_The_Ocean_DNCE.html">Cake By The Ocean - DNCE</a>
						 <a href="songs/c/.html"> </a>
						 <a href="songs/c/.html"> </a>
					 </p>
				 </div>
			 <hr id="d_songs"/><p align="center">D</p><hr/>
				 <div>
					 <p>
						 <a id="dont_stop_believin_journey" href="songs/d/Dont_Stop_Believin_Journey.html">Don't Stop Believin' - Journey</a>
						 <a href="songs/d/.html"> </a>
						 <a href="songs/d/.html"> </a>
					 </p>
				 </div>
			 <hr id="e_songs"/><p align="center">E</p><hr/>
				 <div>
					 <p>
						 <a id="eye_of_the_tiger_survivor" href="songs/e/Eye_Of_The_Tiger_Survivor.html">Eye Of The Tiger - Survivor</a>
						 <a href="songs/e/.html"> </a>
						 <a href="songs/e/.html"> </a>
					 </p>
				 </div> 
			 <hr id="f_songs"/><p align="center">F</p><hr/>
				 <div>
					 <p>
						 <a id="feel_good_robin_thicke" href="songs/f/Feel_Good_Robin_Thicke.html">Feel Good - Robin Thicke</a>
						 <a href="songs/f/.html"> </a>
						 <a href="songs/f/.html"> </a>
					 </p>
				 </div>
			 <hr id="g_songs"/><p align="center">G</p><hr/>
				 <div>
					 <p>
						 <a id="geronimo_sheppard" href="songs/g/Geronimo_Sheppard.html">Geronimo - Sheppard</a>
						 <a href="songs/g/.html"> </a>
						 <a href="songs/g/.html"> </a>
					 </p>
				 </div>
			 <hr id="h_songs"/><p align="center">H</p><hr/>
				 <div>
					 <p>
						 <a id="here_alessia_cara" href="songs/h/Here_Alessia_Cara.html">Here - Alessia Cara</a>
						 <a href="songs/h/.html"> </a>
						 <a href="songs/h/.html"> </a>
					 </p>
				 </div>
			 <hr id="i_songs"/><p align="center">I</p><hr/>
				 <div>
					 <p>
						 <a id="i_write_sins_not_tragedies_panic_at_the_disco" href="songs/i/I_Write_Sins_Not_Tragedies_Panic_At_The_Disco.html">I Write Sins Not Tragedies - Panic! At The Disco</a>
						 <a href="songs/i/.html"> </a>
						 <a href="songs/i/.html"> </a>
					 </p>
				 </div>
			 <hr id="j_songs"/><p align="center">J</p><hr/>
				 <div>
					 <p>
						 <a id="just_give_me_a_reason_pink" href="songs/j/Just_Give_Me_A_Reason_Pink.html">Just Give Me A Reason - P!nk</a>
						 <a href="songs/j/.html"> </a>
						 <a href="songs/j/.html"> </a>
					 </p>
				 </div>
			 <hr id="k_songs"/><p align="center">K</p><hr/>
				 <div>
					 <p>
						 <a id="kill_of_the_night_gin_wigmore" href="songs/k/Kill_Of_The_Night_Gin_Wigmore.html">Kill Of The Night - Gin Wigmore</a>
						 <a href="songs/k/.html"> </a>
						 <a href="songs/k/.html"> </a>
					 </p>
				 </div>
			 <hr id="l_songs"/><p align="center">L</p><hr/>
				 <div>
					 <p>
						 <a id="latch_disclosure" href="songs/l/Latch_Disclosure.html">Latch - Disclosure</a>
						 <a href="songs/l/.html"> </a>
						 <a href="songs/l/.html"> </a>
					 </p>
				 </div>
			 <hr id="m_songs"/><p align="center">M</p><hr/>
				 <div>
					 <p>
						 <a id="me_and_my_broken_heart_rixton" href="songs/m/Me_And_My_Broken_Heart_Rixton.html">Me And My Broken Heart - Rixton</a>
						 <a href="songs/m/.html"> </a>
						 <a href="songs/m/.html"> </a>
					 </p>
				 </div>
			 <hr id="n_songs"/><p align="center">N</p><hr/>
				 <div>
					 <p>
						 <a id="the_nights_avicci" href="songs/n/The_Nights_Avicci.html">The Nights - Avicci</a>
						 <a href="songs/n/.html"> </a>
						 <a href="songs/n/.html"> </a>
					 </p>
				 </div>
			 <hr id="o_songs"/><p align="center">O</p><hr/>
				 <div>
					 <p>
						 <a id="on_my_mind_ellie_goulding" href="songs/o/On_My_Mind_Ellie_Goulding.html">On My Mind - Ellie Goulding</a>
						 <a href="songs/o/.html"> </a>
						 <a href="songs/o/.html"> </a>
					 </p>
				 </div>
			 <hr id="p_songs"/><p align="center">P</p><hr/>
				 <div>
					 <p>
						 <a id="paradise_coldplay" href="songs/p/Paradise_Coldplay.html">Paradise - Coldplay</a>
						 <a href="songs/p/.html"> </a>
						 <a href="songs/p/.html"> </a>
					 </p>
				 </div>
			 <hr id="q_songs"/><p align="center">Q</p><hr/>
				 <div>
					 <p>
						 <a href="songs/q/.html"> </a>
						 <a href="songs/q/.html"> </a>
						 <a href="songs/q/.html"> </a>
					 </p>
				 </div>
			 <hr id="r_songs"/><p align="center">R</p><hr/>
				 <div>
					 <p>
						 <a id="rather_be_clean_bandit" href="songs/r/Rather_Be_Clean_Bandit.html">Rather Be - Clean Bandit</a>
						 <a href="songs/r/.html"> </a>
						 <a href="songs/r/.html"> </a>
					 </p>
				 </div>
			 <hr id="s_songs"/><p align="center">S</p><hr/>
				 <div>
					 <p>
						 <a id="secrets_coldplay" href="songs/s/Secrets_Coldplay.html">Secrets - Coldplay</a>
						 <a href="songs/s/.html"> </a>
						 <a href="songs/s/.html"> </a>
					 </p>
				 </div>
			 <hr id="t_songs"/><p align="center">T</p><hr/>
				 <div>
					 <p>
						 <a id="this_is_how_we_do_katy_perry" href="songs/t/This_Is_How_We_Do_Katy_Perry.html">This Is How We Do - Katy Perry</a>
						 <a href="songs/t/.html"> </a>
						 <a href="songs/t/.html"> </a>
					 </p>
				 </div>
			 <hr id="u_songs"/><p align="center">U</p><hr/>
				 <div>
					 <p>
						 <a id="uma_thurman_fall_out_boy" href="songs/u/Uma_Thurman_Fall_Out_Boy.html">Uma Thurman - Fall Out Boy</a>
						 <a href="songs/u/.html"> </a>
						 <a href="songs/u/.html"> </a>
					 </p>
				 </div>
			 <hr id="v_songs"/><p align="center">V</p><hr/>
				 <div>
					 <p>
						 <a id="victorious_panic_at_the_disco" href="songs/v/Victorious_Panic_At_The_Disco.html">Victorious - Panic! At The Disco</a>
						 <a href="songs/v/.html"> </a>
						 <a href="songs/v/.html"> </a>
					 </p>
				 </div>
			 <hr id="w_songs"/><p align="center">W</p><hr/>
				 <div>
					 <p>
						 <a id="want_to_want_me_jason_derulo" href="songs/w/Want_To_Want_Me_Jason_Derulo.html">Want To Want Me - Jason Derulo</a>
						 <a href="songs/w/.html"> </a>
						 <a href="songs/w/.html"> </a>
					 </p>
				 </div>
			 <hr id="x_songs"/><p align="center">X</p><hr/>
				 <div>
					 <p>
						 <a id="xo_the_eden_project" href="songs/x/XO_The_Eden_Project.html">XO - The Eden Project</a>
						 <a href="songs/x/.html"> </a>
						 <a href="songs/x/.html"> </a>
					 </p>
				 </div>
			 <hr id="y_songs"/><p align="center">Y</p><hr/>
				 <div>
					 <p>
						 <a id="you_know_you_like_it_dj_snake" href="songs/y/You_Know_You_Like_It_DJ_Snake.html">You Know You Like It - DJ Snake</a>
						 <a href="songs/y/.html"> </a>
						 <a href="songs/y/.html"> </a>
					 </p>
				 </div>
			 <hr id="z_songs"/><p align="center">Z</p><hr/>
				 <div>
					 <p>
						 <a href="songs/z/.html"> </a>
						 <a href="songs/z/.html"> </a>
						 <a href="songs/z/.html"> </a>
					 </p>
				 </div>
		 </div>

答案 1 :(得分：0)

我想我会在高度上使用相对尺寸来做到这一点。基本上，将链接的高度和字体大小设置为具有vh度量单位的视口的百分比。

https://jsfiddle.net/6ksL4845/ 

ul.main-menu li a {
  display: block;
  color: #000;
  text-decoration: none;
  height:3.3vh;
  font-size:3vh;
  padding:0.2vh 5%;
}

此外，一个未经请求的建议，以简化您的标记（也显示在小提琴：

你可能会改变：

<hr id="a_songs"/><p align="center">A</p><hr/>

为：

<p id="a_songs" class="letter_heading"/>A</p>

并将其添加到您的CSS：

 .letter_heading  {
   border-top:1px solid #bbb;
   border-bottom:1px solid #bbb;
   padding:15px 0px;
   text-align:center;}
相关问题
最新问题