2017-02-27 40 views
0

我希望能够将我的页脚部分中的链接放在同一行上,并在它们之间留有一定空间。我尝试使用“显示:内联”,但我无法让它工作。有人可以告诉我如何正确地做到这一点吗?如何将链接放在同一行上,并在它们之间有空格?

/* 
 
\t Project name: Portal Hyperlinks 
 
\t Author: Justus Self 
 
\t Date: 2/26/2017 
 
*/ 
 

 
a:link { 
 
\t text-decoration: none; 
 
\t color: DarkBlue; 
 
\t text-align: center; 
 
} 
 

 
a:visited { 
 
\t color: blue; 
 
} 
 

 
a:focus { 
 
\t font-color: white; 
 
\t background-color: MediumBlue; 
 
\t font-size: 1.3em; 
 
} 
 

 
.accent { 
 
\t font-weight: bold; 
 
\t font-variant: small-caps; 
 
\t font-size: 1.4em; 
 
}
<!-- 
 
\t Project name: Portal Hyperlinks 
 
\t Author: Justus Self 
 
\t Date: 2/26/2017 
 
--> 
 

 

 
<!DOCTYPE html> 
 
<html> 
 

 

 
<head> 
 
\t <title> About Us </title> 
 
\t <meta charset="utf-8"/> 
 
\t <link rel="stylesheet" href="styles.css"> 
 
</head> 
 

 
<body> 
 
\t <h1>About Ozarks Technical Community College</h1> 
 
\t 
 
\t <p>Ozarks Technical Community College (OTC) was founded April 3, 1990 when the residents of Springfield school district and 
 
\t 13 surrounding public school districts voted to establish a "community technical college." Since that time, OTC has continued 
 
\t to uphold a core-set of values that include quality, opportunity, accessibility, learning, diversity, innovation, community, 
 
\t respect, integrity and personal growth. We uphold a mission to promote student learning through accessible, high-quality, 
 
\t affordable workforce training, and technical and general education that is responsive to the educational needs of the community 
 
\t and its diverse constituencies.<p> 
 
\t 
 
\t <h3>OTC's Strategic Goals</h3> 
 
\t <br/> 
 
\t <p> Want more information? <a href="mailto:[email protected]"> E-mail OTC.</a></p> 
 
\t <p><span class="accent">Quality</span>: The quality of the faculty, staff, administration and facilities will be enhanced in order to promote continuous 
 
\t responsiveness to the expanding learning needs of the community.</p> 
 
    <p><span class="accent">Effectiveness</span>: The effectiveness of all programs and services will be continuously assessed to ensure integrity and quality are 
 
\t maintained and improved.</p> 
 
    <p><span class="accent">Community Collaboration</span>: Meaningful relationships within the College's service areas will be formed, allowing OTC to develop 
 
\t new programs that reflect the educational needs of the community stakeholders.</p> 
 
    <p><span class="accent">Retention and Graduation Rates</span>: The College will encourage faculty, staff and administration to continually strive to improve 
 
\t the rate of student retention and graduation.</p> 
 
\t <p><span class="accent">Graduate Performance</span>: The College will promote high academic standards that will serve to enhance the success of graduates at 
 
\t the workplace and in transfer institutions.</p> 
 
    <p<span class="accent">Innovation</span>: The College will provide innovative teaching strategies that promote continued learning opportunities for students.</p> 
 
    <p><span class="accent">Affordability</span>: The College will provide affordable learning opportunities to all community members.<p> 
 
    <p><span class="accent">Learning Centered</span>: The College will promote a learning-centered environment that focuses on students' needs and reduces barriers to 
 
\t student success.</p> 
 
\t 
 
\t <br/> 
 
\t <br/> 
 
\t 
 
\t <footer> 
 
\t \t <h4><a href="index.html"> Portal </h4> 
 
\t \t <h4><a href="page2.html"> Classes </h4> 
 
\t </footer> 
 

 
</body> 
 

 
</html>

回答

1

你想要h4元素,这通常是blockinline代替。然后,您可以使用水平(左/右)边距或填充将它们分隔开。您还需要关闭您的a标签。

footer h4 { 
 
    display: inline; 
 
    margin-right: 1em; 
 
}
<footer> 
 
    <h4><a href="index.html">Portal</a></h4> 
 
    <h4><a href="page2.html">Classes</a></h4> 
 
</footer>

+0

感谢。这是最好的解决方案。我最大的问题是在写脚注后没有写h4。关闭标签并不是问题,但我在验证后会抓住它们。感谢您的快速响应。 –

+0

@SkryBlackfall不客气。 –

0

您可以使用此:

footer{text-align:center;} 
 
    footer h4{ 
 
    display: inline; 
 
    margin-right: 10px; 
 
     margin-left:10px; 
 
    } 
 

 
<div style="height:100px;"></div> 
 
<footer style="background:yellow;"> 
 
    <h4><a href="index.html">Portal</a></h4> 
 
    <h4><a href="page2.html">Classes</a></h4> 
 
</footer>

+0

链接包装在块级元素('h4')中,所以这不会将它们放在同一行上。 –

+0

是的,首先,我认为他使用内联进行链接。 –

+0

对不起,您的意思是首先使用内联?他们有'h4'包装两个链接,所以你给的CSS不会把它们放在同一行,所以它不会在它们之间放置空间。 –

0

只是把它们放进相同的父元素,并定义为第一a标签的保证金权:

<footer> 
    <h4><a href="index.html" style="margin-right: 50px;">Portal</a><a href="page2.html">Classes</a></h4> 
</footer> 

BTW你忘了关闭a标签

+0

为什么要添加跨度,而不仅仅是将链接边距放在链接本身上?看起来像跨度是不必要的标记在这里。 –

+0

感谢您指出。我还没有运行我的验证程序。 –

0
<footer> 
    <h4><a href="index.html" style="margin-right: 20px">Portal</a><a href="page2.html">Classes</a></h4> 
</footer> 

肯定要收你的锚标记,而不是使用两个H4标签,然后必须覆盖它们的默认行为,只是围内的两个链接同样的h4。然后,只需修改边距 - 右侧以在链接之间创建任意大小的空间。

0

一个简单的答案是从页脚链接中删除<h4>标记。 <h4>是一个块元素。

<footer> 
    <a href="index.html"> Portal</a> 
    <a href="page2.html"> Classes </a> 
</footer> 

然后,如果要将这些链接设置得更大,请使用如下所示的CSS。

footer a { 
    display:inline; 
    font-size: 18px; 
    font-weight:bold; 
    margin-right:1.5em; 
} 

输出

enter image description here

相关问题