如何将页脚的文本放在中心和菜单的链接在中心和彼此相邻？ [英] How to put the text of footer in center and the links of menu in center and next to each other?
问题描述
我预期的结果和代码如下。我现在的样式工作，但问题是页脚太宽，并且menu1.menu2，menu3没有如图所示。
预期结果
50％| LeftHeader middleHeader RightHeade | 50％
50％| Menu1 Menu2 Menu3 | 50％
50％|内容到这里********************************** ************* | 50％
| ******************************************* ********************** |
50％| Footer的文本在这里| 50％
这些行>> |
我的代码如下
< html>
< head>
< style>
#wrapper {
margin：0 auto;
width：50％;
}
#header {
background-color：#faa;
height：50px;
font-size：0;
}
#header> div {
display：inline-block;
width：33.3333％;
font-size：12pt;
height：100％;
}
#left {
background-color：red;
height：20px;
}
#middle {
background-color：yellow;
height：20px;
}
#right {
background-color：green;
height：20px;
}
#menu {
width：100％;
margin：0 auto;
background-color：#faa;
height：20px;
font-size：0;
}
#menu> a {
display：inline-block;
font-size：12pt;
width：33.333％
}
#leftm {
text-align：right;
}
#content {
top：50px;
bottom：150px;
overflow：auto;
}
#footer {
bottom：0;
width：100％;
background-color：#afa;
height：150px;
position：fixed;
}
#footer> div {
margin-left：50％;
}
< / style>
< / head>
< body>
< div id =wrapper>
< div id =header>
< div id =left>
left header
< / div>
< div id =middle>
middle
< / div>
< div id =right>
right header
< / div>
< / div>
< div id =menu>
< div id =leftm>< a href =＃> menu1< / a>< / div>
< a href =＃> menu2< / a>
< a href =＃> menu3< / a>
< / div>
< div id =content>
vbcfxbfgbfcgbfg
< / div>
< div id =footer>
< div id =footertext>
这是页脚
< / div>
< / div>
< / div>
< / body>
我当前代码的结果
50％| LeftHeader middleHeader RightHeade | 50％
50％| Menu1 Menu2 Menu3 | 50％
50％|内容到这里********************************** ************* | 50％
| ******************************************* ********************** |
50％| Footer的文本在这里| 50％
查看更新后的代码此处。
我已将菜单链接包装在另一个div中： 显示：inline-block 与 #menu 的 text-align $ c>设置为 center 。
页脚中的文本也以 text-align：center 为中心。 / p>
首先，打开一个新的问题，询问同样的事情是不好的做法。其次，避免宣布我的代码，除非你写了大部分（这不是这里的情况）。第三，这个问题没有显示出很多研究工作，因为可以轻松地搜索到页脚text-align。
I am expected result and the code are as following. My current style works but the problem is that the footer is too wide and and menu1.menu2,menu3 are not as illustrated blew,
Expected result
50% |LeftHeader middleHeader RightHeade| 50%
50% | Menu1 Menu2 Menu3 | 50%
50% |Content goes here ***********************************************| 50%
|*****************************************************************|
50% | text of Footer goes here | 50%
These lines >> | show the border sections for example footer is that big but its text should be in center.
My code is as following
<html>
<head>
<style>
#wrapper {
margin: 0 auto;
width:50%;
}
#header {
background-color:#faa;
height:50px;
font-size: 0;
}
#header > div {
display: inline-block;
width: 33.3333%;
font-size: 12pt;
height: 100%;
}
#left {
background-color:red;
height:20px;
}
#middle {
background-color:yellow;
height:20px;
}
#right {
background-color:green;
height:20px;
}
#menu {
width: 100%;
margin: 0 auto;
background-color:#faa;
height: 20px;
font-size: 0;
}
#menu > a {
display: inline-block;
font-size: 12pt;
width: 33.333%
}
#leftm {
text-align: right;
}
#content {
top:50px;
bottom:150px;
overflow:auto;
}
#footer {
bottom: 0;
width: 100%;
background-color:#afa;
height:150px;
position:fixed;
}
#footer > div {
margin-left: 50%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="left">
left header
</div>
<div id="middle">
middle
</div>
<div id="right">
right header
</div>
</div>
<div id="menu">
<div id="leftm"><a href="#">menu1</a></div>
<a href="#">menu2</a>
<a href="#">menu3</a>
</div>
<div id="content">
vbcfxbfgbfcgbfg
</div>
<div id="footer">
<div id="footertext">
And here's the footer
</div>
</div>
</div>
</body>
Result of my current code
50% |LeftHeader middleHeader RightHeade| 50%
50% |Menu1 Menu2 Menu3 | 50%
50% |Content goes here ***********************************************| 50%
|*****************************************************************|
50% | text of Footer goes here | 50%
See updated code here.
I've wrapped the menu links in another div: display: inline-block with the text-align of the #menu set to center. This centers the three links.
The text in the footer is also centered through text-align: center.
Firstly, it is bad practice to open a new question asking the same thing. Secondly, avoid announcing "My code" unless you wrote the majority of it (this is not the case here). Thirdly, this question does not show much research effort as the footer text-align can easily be searched up.
这篇关于如何将页脚的文本放在中心和菜单的链接在中心和彼此相邻？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
