Question

我希望能够将页脚部分中的链接放在同一行，并且它们之间有一些空格。我尝试使用＆＃34; display：inline＆＃34;，但我无法让它工作。有人可以告诉我如何正确地做到这一点吗？

＆＃13;

/*
	Project name: Portal Hyperlinks
	Author: Justus Self
	Date: 2/26/2017
*/

a:link {
	text-decoration: none;
	color: DarkBlue;
	text-align: center;
}

a:visited {
	color: blue;
}

a:focus {
	font-color: white;
	background-color: MediumBlue;
	font-size: 1.3em;
}

.accent {
	font-weight: bold;
	font-variant: small-caps;
	font-size: 1.4em;
}

＆＃13;

<!--
	Project name: Portal Hyperlinks
	Author: Justus Self
	Date: 2/26/2017
-->


<!DOCTYPE html>
<html>


<head>
	<title> About Us </title>
	<meta charset="utf-8"/>
	<link rel="stylesheet" href="styles.css">
</head>

<body>
	<h1>About Ozarks Technical Community College</h1>
	
	<p>Ozarks Technical Community College (OTC) was founded April 3, 1990 when the residents of Springfield school district and 
	   13 surrounding public school districts voted to establish a "community technical college." Since that time, OTC has continued 
	   to uphold a core-set of values that include quality, opportunity, accessibility, learning, diversity, innovation, community, 
	   respect, integrity and personal growth. We uphold a mission to promote student learning through accessible, high-quality, 
	   affordable workforce training, and technical and general education that is responsive to the educational needs of the community 
	   and its diverse constituencies.<p>
	
	<h3>OTC's Strategic Goals</h3>
	<br/>
	<p> Want more information? <a href="mailto:js0877658@otc.edu"> E-mail OTC.</a></p>
	<p><span class="accent">Quality</span>: The quality of the faculty, staff, administration and facilities will be enhanced in order to promote continuous 
	   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 
	   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 
	   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 
	   the rate of student retention and graduation.</p>
	<p><span class="accent">Graduate Performance</span>: The College will promote high academic standards that will serve to enhance the success of graduates at 
	   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 
	  student success.</p>
	  
	<br/>
	<br/>  
	
	<footer>
		<h4><a href="index.html"> Portal </h4>
		<h4><a href="page2.html"> Classes </h4>
	</footer>

</body>

</html>

＆＃13;

Answer 1

您希望h4元素通常block代替inline。然后，您可以使用水平（左/右）边距或填充来将它们分开。您还需要关闭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>

Answer 2

您可以使用：

    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>

Answer 3

只需将它们放入相同的父元素中，并为第一个import redis from location import REDLOC2 #location of relevant unix socket my_server = redis.StrictRedis(unix_socket_path=REDLOC2) # Get recent lualatestlogins = """ local l = redis.call('ZRANGEBYSCORE', KEYS[1], ARGV[1]-600, '+inf') -- returns key:value pairs local c = {} for _, v in pairs(l) do local p = v:find(':') local i = v:sub(1,p-1) c[#c+1] = i end return c""" getlatestlogins = my_server.register_script(lualatestlogins) # Evict old luacleanselogins = """ redis.call('ZREMRANGEBYSCORE', KEYS[1], '-inf', '(' .. ARGV[1]-600)""" cleanselogins = my_server.register_script(luacleanselogins) # -- Store new luastorelogin = """ redis.call('ZADD', KEYS[1], ARGV[1], ARGV[2] .. ':' .. ARGV[3]) redis.call('SET',KEYS[2],ARGV[3]) redis.call('EXPIRE',KEYS[2],600)""" storelogin = my_server.register_script(luastorelogin) # Retrieve collisions luaretrieveclones = """ local q = redis.call('GET',KEYS[2]) if q == nil or q == '' then return nil else local l = redis.call('ZRANGEBYSCORE', KEYS[1], ARGV[1]-600, '+inf') local c = {} for _, v in pairs(l) do local p = v:find(':') local i = v:sub(1,p-1) local n = v:sub(p+1) if n == q then c[#c+1] = i end end return c end""" retrieveclones = my_server.register_script(luaretrieveclones)标记定义边距权限：

BTW您忘了关闭<footer> <h4><a href="index.html" style="margin-right: 50px;">Portal</a><a href="page2.html">Classes</a></h4> </footer>代码

Answer 4

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

绝对想要关闭你的锚标签，而不是使用两个h4标签，然后必须覆盖它们的默认行为，只需将两个链接都包含在同一个h4中。然后，只需修改margin-right即可在链接之间创建任何大小的空间。

Answer 5

一个简单的答案是从页脚链接中删除<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;
}

<强>输出

如何将链接放在同一行，它们之间有空格？

5 个答案: