链接不对齐如果多条线路

问题描述 投票：0回答：2

我创建一个菜单页面与几个链接以供一批教师。我想的链接被视为在桌面，触摸屏或手机轻松导航按钮。 CSS的我已经是下面：

a.buttons:link, a:visited {
    background: #001E60; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#34657F, #001E60); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#34657F, #001E60); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#34657F, #001E60); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#34657F, #001E60); /* Standard syntax */line-height: 50px; 
    color: white;
    border: 2px solid #EAAA00;
    padding-top: 20px;
    padding-left: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 5px;
    width: 300px;
    height: 100px;
    font-size: 20px;
}

这似乎如预期除非链接文本换行到两行的工作。如果是这样，链接不是水平对齐。示例如下，并链接文本“专业发展优先审批表”引起错位。完整的网址为here。什么是要完成什么，我试图做的最好方法是什么？

<h1>Faculty</h1>
<h2>Bible Studies</h2>
<a href='http://princeave.com/0/revelations_ablaze.php' title='This is a 9 part series by Pastor Josh Smith from Prince Avenue on chapters 1-5 of Revelation.  This series is available  in audio or video format.' target='_blank' class='buttons'> Ablaze With His Glory</a>
<a href='http://princeave.com/0/a_study_of_philippians.php' title='This is a 27 part series by Pastor Josh Smith from Prince Avenue on the book of Philippians.  This series is available  in audio or video format.' target='_blank' class='buttons'> Philippians - Together for the Gospel</a>
<h2>Forms</h2>
<a href='https://princeave-my.sharepoint.com/personal/keley_princeave_org/_layouts/15/guestaccess.aspx?guestaccesstoken=LeveEcmr5rB%2fF%2fmUPS17uXPjuStCSmAaeWcmJsLS4E0%3d&docid=2_1ba3837b874174956adb1089d9cad2ca7&rev=1' title='Form to renew an ACSI certificate' target='_blank' class='buttons'> ACSI Certification Application</a>
<a href='hhttps://princeave.sharepoint.com/PACS%20-%20Academic%20Dean/Shared%20Documents/Form/PACS%20Education%20Assistance%20Form%20(fillable).pdf' title='Form to request funds for pursuing an advanced degree' target='_blank' class='buttons'> Education Assistance Form</a>
<a href='https://princeave.sharepoint.com/:b:/g/PACS%20Faculty/Ec5ahbAa5BpEvU6Z_Ge0ysUBYbAxnvzr2fAnSyAQWsDrQQ?e=8t1Z53' title='The faculty handbook' target='_blank' class='buttons'> Employee Handbook</a>
<a href='https://princeave.sharepoint.com/PACS%20Faculty/Shared%20Documents/Forms/AllItems.aspx?id=%2FPACS%20Faculty%2FShared%20Documents%2FField%20Trips%2FField%20Trip%20Approval%20Process%2Epdf&parent=%2FPACS%20Faculty%2FShared%20Documents%2FField%20Trips' title='' target='_blank' class='buttons'> Field Trip Approval Process</a>
<a href='https://princeave.sharepoint.com/PACS%20Faculty/_layouts/15/WopiFrame.aspx?sourcedoc=%7BB58B1578-901F-4116-9B29-86D7DF95BBBF%7D&file=Field%20Trip%20Form.xlsx&action=default' title='' target='_blank' class='buttons'> Field Trip Form</a>
<a href='https://princeave.sharepoint.com/PACS%20-%20Academic%20Dean/Shared%20Documents/Form/PACS%20Professional%20Development%20Prior%20Approval%20Form%20(Fillable).pdf' title='Form to request funds for Professional Development seminar, class, etc.' target='_blank' class='buttons'> Professional Development Prior Approval Form</a>
<a href='https://docs.google.com/forms/d/e/1FAIpQLSdcY-g1mL6ZNR4RG6XleiSmZyEnEXKhRvwzGzxOdrmE7gifnw/viewform' title='Request ACSI CEUs by awarded to you for completion of an existing CEU course.' target='_blank' class='buttons'> Request CEU credits</a>
<a href='https://docs.google.com/forms/d/e/1FAIpQLSddr1ZeyOmmllKXxG8-lvwmCH-wMpEhOwPDGEjTvxJ-BknXOw/viewform' title='Submit a webinar, conference, or Bible study to determine if ACSI CEUs can be granted. Please fill out the fields on this page.' target='_blank' class='buttons'> Request New CEU course</a>
css alignment
2个回答
1
投票

你错过：vertical-align:top;

该垂直对齐CSS属性设置一个内联或表单元格框的垂直取向。

请参阅this更多信息（Related）。

示例片段：

a.buttons:link, a:visited {
    background: #001E60; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#34657F, #001E60); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#34657F, #001E60); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#34657F, #001E60); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#34657F, #001E60); /* Standard syntax */line-height: 50px; 
    color: white;
    border: 2px solid #EAAA00;
    padding-top: 20px;
    padding-left: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 5px;
    width: 300px;
    height: 100px;
    font-size: 20px;
    vertical-align:top;
}
<h1>Faculty</h1>
<h2>Bible Studies</h2>
<a href='http://princeave.com/0/revelations_ablaze.php' title='This is a 9 part series by Pastor Josh Smith from Prince Avenue on chapters 1-5 of Revelation.  This series is available  in audio or video format.' target='_blank' class='buttons'> Ablaze With His Glory</a>
<a href='http://princeave.com/0/a_study_of_philippians.php' title='This is a 27 part series by Pastor Josh Smith from Prince Avenue on the book of Philippians.  This series is available  in audio or video format.' target='_blank' class='buttons'> Philippians - Together for the Gospel</a>
<h2>Forms</h2>
<a href='https://princeave-my.sharepoint.com/personal/keley_princeave_org/_layouts/15/guestaccess.aspx?guestaccesstoken=LeveEcmr5rB%2fF%2fmUPS17uXPjuStCSmAaeWcmJsLS4E0%3d&docid=2_1ba3837b874174956adb1089d9cad2ca7&rev=1' title='Form to renew an ACSI certificate' target='_blank' class='buttons'> ACSI Certification Application</a>
<a href='hhttps://princeave.sharepoint.com/PACS%20-%20Academic%20Dean/Shared%20Documents/Form/PACS%20Education%20Assistance%20Form%20(fillable).pdf' title='Form to request funds for pursuing an advanced degree' target='_blank' class='buttons'> Education Assistance Form</a>
<a href='https://princeave.sharepoint.com/:b:/g/PACS%20Faculty/Ec5ahbAa5BpEvU6Z_Ge0ysUBYbAxnvzr2fAnSyAQWsDrQQ?e=8t1Z53' title='The faculty handbook' target='_blank' class='buttons'> Employee Handbook</a>
<a href='https://princeave.sharepoint.com/PACS%20Faculty/Shared%20Documents/Forms/AllItems.aspx?id=%2FPACS%20Faculty%2FShared%20Documents%2FField%20Trips%2FField%20Trip%20Approval%20Process%2Epdf&parent=%2FPACS%20Faculty%2FShared%20Documents%2FField%20Trips' title='' target='_blank' class='buttons'> Field Trip Approval Process</a>
<a href='https://princeave.sharepoint.com/PACS%20Faculty/_layouts/15/WopiFrame.aspx?sourcedoc=%7BB58B1578-901F-4116-9B29-86D7DF95BBBF%7D&file=Field%20Trip%20Form.xlsx&action=default' title='' target='_blank' class='buttons'> Field Trip Form</a>
<a href='https://princeave.sharepoint.com/PACS%20-%20Academic%20Dean/Shared%20Documents/Form/PACS%20Professional%20Development%20Prior%20Approval%20Form%20(Fillable).pdf' title='Form to request funds for Professional Development seminar, class, etc.' target='_blank' class='buttons'> Professional Development Prior Approval Form</a>
<a href='https://docs.google.com/forms/d/e/1FAIpQLSdcY-g1mL6ZNR4RG6XleiSmZyEnEXKhRvwzGzxOdrmE7gifnw/viewform' title='Request ACSI CEUs by awarded to you for completion of an existing CEU course.' target='_blank' class='buttons'> Request CEU credits</a>
<a href='https://docs.google.com/forms/d/e/1FAIpQLSddr1ZeyOmmllKXxG8-lvwmCH-wMpEhOwPDGEjTvxJ-BknXOw/viewform' title='Submit a webinar, conference, or Bible study to determine if ACSI CEUs can be granted. Please fill out the fields on this page.' target='_blank' class='buttons'> Request New CEU course</a>
0
投票

我固定雅了Flexbox的，搬来搬去一些CSS，并包裹在你的DIV A的。总是包裹在div的布局的元素：

.link-boxes
{
  display: flex;
  flex-wrap: wrap;
}

.link-boxes > div
{
	padding: 0.5em;
	display: flex;
	background: #001E60; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(#34657F, #001E60); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#34657F, #001E60); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#34657F, #001E60); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#34657F, #001E60); 
	border: 2px solid #EAAA00;
	margin-top: 1rem;
	width: 300px;
	height: 100px;
	text-align: center;
}

.link-boxes > div:not(:last-of-type)
{
	margin-right: 1rem;
}

.link-boxes > div > a
{
	vertical-align: middle;
	color: white;
	text-decoration: none;
	font-size: 20px;
	margin: auto;
}
<h1>Faculty</h1>
<h2>Bible Studies</h2>
<div class="link-boxes">
  <div>
		<a href='http://princeave.com/0/revelations_ablaze.php' title='This is a 9 part series by Pastor Josh Smith from Prince Avenue on chapters 1-5 of Revelation.  This series is available  in audio or video format.' target='_blank' class='buttons'> Ablaze With His Glory</a>
  </div>
  <div>
		<a href='http://princeave.com/0/a_study_of_philippians.php' title='This is a 27 part series by Pastor Josh Smith from Prince Avenue on the book of Philippians.  This series is available  in audio or video format.' target='_blank' class='buttons'> Philippians - Together for the Gospel</a>
  </div>
</div>

<h2>Forms</h2>

<div class="link-boxes">
  <div>
		<a href='https://princeave-my.sharepoint.com/personal/keley_princeave_org/_layouts/15/guestaccess.aspx?guestaccesstoken=LeveEcmr5rB%2fF%2fmUPS17uXPjuStCSmAaeWcmJsLS4E0%3d&docid=2_1ba3837b874174956adb1089d9cad2ca7&rev=1' title='Form to renew an ACSI certificate' target='_blank' class='buttons'> ACSI Certification Application</a>
  </div>
  <div>
<a href='hhttps://princeave.sharepoint.com/PACS%20-%20Academic%20Dean/Shared%20Documents/Form/PACS%20Education%20Assistance%20Form%20(fillable).pdf' title='Form to request funds for pursuing an advanced degree' target='_blank' class='buttons'> Education Assistance Form</a>
  </div>
  <div>
<a href='https://princeave.sharepoint.com/:b:/g/PACS%20Faculty/Ec5ahbAa5BpEvU6Z_Ge0ysUBYbAxnvzr2fAnSyAQWsDrQQ?e=8t1Z53' title='The faculty handbook' target='_blank' class='buttons'> Employee Handbook</a>
  </div>
  <div>
<a href='https://princeave.sharepoint.com/PACS%20Faculty/Shared%20Documents/Forms/AllItems.aspx?id=%2FPACS%20Faculty%2FShared%20Documents%2FField%20Trips%2FField%20Trip%20Approval%20Process%2Epdf&parent=%2FPACS%20Faculty%2FShared%20Documents%2FField%20Trips' title='' target='_blank' class='buttons'> Field Trip Approval Process</a>
  </div>
  <div>
<a href='https://princeave.sharepoint.com/PACS%20Faculty/_layouts/15/WopiFrame.aspx?sourcedoc=%7BB58B1578-901F-4116-9B29-86D7DF95BBBF%7D&file=Field%20Trip%20Form.xlsx&action=default' title='' target='_blank' class='buttons'> Field Trip Form</a>
  </div>
  <div>
<a href='https://princeave.sharepoint.com/PACS%20-%20Academic%20Dean/Shared%20Documents/Form/PACS%20Professional%20Development%20Prior%20Approval%20Form%20(Fillable).pdf' title='Form to request funds for Professional Development seminar, class, etc.' target='_blank' class='buttons'> Professional Development Prior Approval Form</a>
  </div>
  <div>
<a href='https://docs.google.com/forms/d/e/1FAIpQLSdcY-g1mL6ZNR4RG6XleiSmZyEnEXKhRvwzGzxOdrmE7gifnw/viewform' title='Request ACSI CEUs by awarded to you for completion of an existing CEU course.' target='_blank' class='buttons'> Request CEU credits</a>
  </div>
  <div>
<a href='https://docs.google.com/forms/d/e/1FAIpQLSddr1ZeyOmmllKXxG8-lvwmCH-wMpEhOwPDGEjTvxJ-BknXOw/viewform' title='Submit a webinar, conference, or Bible study to determine if ACSI CEUs can be granted. Please fill out the fields on this page.' target='_blank' class='buttons'> Request New CEU course</a>
  </div>
</div>

请参阅：https://codepen.io/cloudulus/pen/BMmmXJ

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.