如果多行链接未对齐

时间：2019-02-07 01:47:53

标签： css alignment

我正在创建一个菜单页面，其中包含几个链接，供一组教师使用。我希望将链接视为按钮，以便在台式机，触摸屏或电话上轻松导航。我拥有的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;
}

除非链接文本换成两行，否则这似乎可以预期。如果是这样，则链接未水平对齐。下面是一个示例，链接文本“专业开发事先批准表格”会导致不一致。完整的页面URL为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>

2 个答案:

答案 0 :(得分：1)

您丢失了：vertical-align:top;

  

vertical-align 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>

答案 1 :(得分：0)

我用flexbox修复了问题，移动了一些CSS，并将A包裹在DIV中。总是将元素包装在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

相关问题
最新问题