HTML和CSS按钮定位
[英]HTML and CSS button positioning
问题描述
I have 4 buttons on this HTML page, currently they are all in a straight line going down the middle. 
我在此HTML页面上有4个按钮，当前它们都位于中间的一条直线上。 I would like to have one button (the master button) be in the top middle than below have the other 3 buttons going horizontally.Thank you for any help.This is what the HTML looks like(button 7 is the master)... 我想一个按钮（主按钮）位于上方中间，而其他三个按钮则水平放置。谢谢您的帮助。这就是HTML的外观（按钮7是主按钮）...
<body>
<section>
<a href="#" value="Off" onclick="button7()" id="button7"></a>
<span></span>
</section>
<section>
<a href="#" value="Off" onclick="button1()" id="button1"></a>
<span></span>
</section>
<section>
<a href="#" value="Off" onclick="button2()" id="button2"></a>
<span></span>
</section>
<section>
<a href="#" value="Off" onclick="button3()" id="button3"></a>
<span></span>
</section>
</body>
Than there is the CSS... 比有CSS ...
body {
background: url('http://subtlepatterns.com/patterns/micro_carbon.png');
}
section {
margin: 150px auto 0;
width: 75px;
height: 95px;
position: relative;
text-align: center;
}
:active, :focus {
outline: 0;
}
/** Font-Face **/
@font-face {
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
src: url("fonts/fontawesome-webfont.eot?#iefix") format('eot'),
url("fonts/fontawesome-webfont.woff") format('woff'),
url("fonts/fontawesome-webfont.ttf") format('truetype'),
url("fonts/fontawesome-webfont.svg#FontAwesome") format('svg');
font-weight: normal;
font-style: normal;
}
/** Styling the Button **/
a {
font-family: "FontAwesome";
text-shadow: 0px 1px 1px rgba(250,250,250,0.1);
font-size: 32pt;
display: block;
position: relative;
text-decoration: none;
box-shadow: 0px 3px 0px 0px rgb(34,34,34),
0px 7px 10px 0px rgb(17,17,17),
inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
inset 0px -12px 35px 0px rgba(0, 0, 0, .5);
width: 70px;
height: 70px;
border: 0;
color: rgb(37,37,37);
border-radius: 35px;
text-align: center;
line-height: 79px;
background-color: rgb(83,87,93);
transition: color 350ms ease, text-shadow 350ms;
-o-transition: color 350ms ease, text-shadow 350ms;
-moz-transition: color 350ms ease, text-shadow 350ms;
-webkit-transition: color 350ms ease, text-shadow 350ms;
}
a:before {
content: "";
width: 80px;
height: 80px;
display: block;
z-index: -2;
position: absolute;
background-color: rgb(26,27,29);
left: -5px;
top: -2px;
border-radius: 40px;
box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1),
inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}
a:active {
box-shadow: 0px 0px 0px 0px rgb(34,34,34),
0px 3px 7px 0px rgb(17,17,17),
inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
background-color: rgb(83,87,93);
top: 3px;
}
a.on {
box-shadow: 0px 0px 0px 0px rgb(34,34,34),
0px 3px 7px 0px rgb(17,17,17),
inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
background-color: rgb(83,87,93);
top: 3px;
color: #fff;
text-shadow: 0px 0px 3px rgb(250,250,250);
}
a:active:before, a.on:before {
top: -5px;
background-color: rgb(26,27,29);
box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1),
inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}
/* Styling the Indicator light */
a + span {
display: block;
width: 8px;
height: 8px;
background-color: rgb(226,0,0);
box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),
0px 0px 3px 2px rgba(226,0,0,0.5);
border-radius: 4px;
clear: both;
position: absolute;
bottom: 0;
left: 42%;
transition: background-color 350ms, box-shadow 700ms;
-o-transition: background-color 350ms, box-shadow 700ms;
-moz-transition: background-color 350ms, box-shadow 700ms;
-webkit-transition: background-color 350ms, box-shadow 700ms;
}
a.on + span {
box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),
0px 0px 3px 2px rgba(135,187,83,0.5);
background-color: rgb(135,187,83);
}
5 个解决方案
解决方案1
0 2014-07-15 23:34:15
float:left; on the bottom 3. clear:left; 在底部3. clear:left; on the 2nd (meaning the 1st of the bottom 3). 在第二个（意思是底部3中的第一个）。 If you want to center the bottom 3, wrap in a div, give the div a width and height then margin:0 auto; 如果要使底部3居中，请包裹div，为div设置宽度和高度，然后margin:0 auto; on the div, then you don't have to clear:left; 在div上，则不必clear:left; . 。
Note section is not backward compatible with IE 7. 注意section与IE 7不向后兼容。
解决方案2
0 已采纳 2014-07-15 23:34:29
I have modified your html code, i dont have reputation to comment, so posting as answer. 我已经修改了您的html代码，但我没有声誉可以发表评论，因此请张贴为答案。 Not sure is this what you need ? 不确定这是您需要的吗？
<body >
<section style="margin:0 0 0 50%">
<a href="#" value="Off" onclick="button7()" id="button7"></a>
<span></span>
</section>
<div style="margin:0 0 0 48%">
<section style="float:left">
<a href="#" value="Off" onclick="button1()" id="button1"></a>
<span></span>
</section>
<section style="float:left">
<a href="#" value="Off" onclick="button2()" id="button2"></a>
<span></span>
</section>
<section style="float:left">
<a href="#" value="Off" onclick="button3()" id="button3"></a>
<span></span>
</section>
</div>
</body>
解决方案3
0 2014-07-15 23:38:46
Wrap the last 3 in a DIV and set these styles: JSFiddle 将最后3个环绕在DIV中并设置以下样式： JSFiddle
CSS: CSS：
body div section { float: left; }
body div { margin: 0 auto; overflow: hidden; width: 225px; }
HTML: HTML：
<section>
<a href="#" id="button7"></a><span></span>
</section>
<div>
<section>
<a href="#" id="button1"></a><span></span>
</section>
<section>
<a href="#" id="button2"></a><span></span>
</section>
<section>
<a href="#" id="button3"></a><span></span>
</section>
</div>
I simplifed the tags to save space and make it more readable 我简化了标签以节省空间并使其更具可读性
解决方案4
0 2014-07-15 23:46:59
If I read your question right, you need to do the following: 如果我没看错您的问题，则需要执行以下操作：
In your css, add: 在您的CSS中，添加：
#wrap {
width:100%;
display:inline-flex;
}
#wrap:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
display: inline-flex;
flex-direction: row;
}
and then between the second button add a div with an id of wrap 然后在第二个按钮之间添加一个ID为wrap的div
<div id="wrap">
Then end your div after the last </section> tag 然后在最后一个</section>标记后结束div
This gives you your top button on the top line, and the 3 remaining on the line below, centered on the page. 这将使您的顶部按钮位于顶部行，而剩下的3个按钮位于页面底部的中心。
Amended code: 修改后的代码：
<body>
<section>
<a href="#" value="Off" onclick="button7()" id="button7"></a>
<span></span>
</section>
<div id="wrap">
<section>
<a href="#" value="Off" onclick="button1()" id="button1"></a>
<span></span>
</section>
<section>
<a href="#" value="Off" onclick="button2()" id="button2"></a>
<span></span>
</section>
<section>
<a href="#" value="Off" onclick="button3()" id="button3"></a>
<span></span>
</section>
</div>
</body>
解决方案5
0 2014-07-15 23:47:09
If you don't want to change your HTML, you can use the following styles in addition to what you have posted: 如果您不想更改HTML，则除了发布的内容外，还可以使用以下样式：
body {
text-align: center;
}
section:first-child ~ section {
display: inline-block;
vertical-align: top;
}
http://jsfiddle.net/ryanwheale/ML7sK/ http://jsfiddle.net/ryanwheale/ML7sK/
I recommend using a wrapping div with a class like "buttons" and using that in your styles: 我建议将包装div与“按钮”之类一起使用，并在您的样式中使用它：
.buttons {
text-align: center;
}
.buttons > section:first-child ~ section {
display: inline-block;
vertical-align: top;
}
http://jsfiddle.net/ryanwheale/ML7sK/1/ http://jsfiddle.net/ryanwheale/ML7sK/1/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.