Question

我在这个HTML页面上有4个按钮，目前它们都在中间的直线上。我想有一个按钮（主按钮）位于顶部中间而不是下面，其他3个按钮水平移动。感谢您的任何帮助。这就是HTML的样子（按钮7是主人）...

<body>
    <section>
        <a href="#" value="Off" onclick="button7()" id="button7">&#xF011;</a>
        <span></span>
    </section>
    <section>
        <a href="#" value="Off" onclick="button1()" id="button1">&#xF011;</a>
        <span></span>
    </section>
    <section>
        <a href="#" value="Off" onclick="button2()" id="button2">&#xF011;</a>
        <span></span>
    </section>
    <section>
        <a href="#" value="Off" onclick="button3()" id="button3">&#xF011;</a>
        <span></span>
    </section>
</body>

比有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);
}

Answer 1

float:left;位于底部3. clear:left;位于第2位（意思是底部3的第1位）。如果你想让底部3居中，请在div中包含div，然后在div上为div设置宽度和高度margin:0 auto;，那么你就不必clear:left;。

注意section与IE 7不向后兼容。

Answer 2

我修改了你的html代码，我没有评论的声誉，所以张贴作为答案。不确定这是你需要的吗？

JSfiddle

  <body >
    <section style="margin:0 0 0 50%">
        <a href="#" value="Off" onclick="button7()" id="button7">&#xF011;</a>
        <span></span>
    </section>
<div style="margin:0 0 0 48%">
    <section style="float:left">
        <a href="#" value="Off" onclick="button1()" id="button1">&#xF011;</a>
        <span></span>
    </section>
    <section style="float:left">
        <a href="#" value="Off" onclick="button2()" id="button2">&#xF011;</a>
        <span></span>
    </section>
    <section style="float:left">
        <a href="#" value="Off" onclick="button3()" id="button3">&#xF011;</a>
        <span></span>
    </section>
    </div>
    </body>

Answer 3

将DIV中的最后3个换行并设置这些样式： JSFiddle

CSS：

body div section { float: left; }
body div { margin: 0 auto; overflow: hidden; width: 225px; }

HTML：

   <section>
        <a href="#" id="button7">&#xF011;</a><span></span>
    </section>
<div>
    <section>
        <a href="#" id="button1">&#xF011;</a><span></span>
    </section>
    <section>
        <a href="#" id="button2">&#xF011;</a><span></span>
    </section>
    <section>
        <a href="#" id="button3">&#xF011;</a><span></span>
    </section>
</div>

我简化了标签以节省空间并使其更具可读性

Answer 4

如果我正确地阅读了您的问题，您需要执行以下操作：

在你的CSS中，添加：

#wrap {
            width:100%;
            display:inline-flex;
    }

    #wrap:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
            display: inline-flex;
            flex-direction: row;    
    }

然后在第二个按钮之间添加一个id为wrap

的div

<div id="wrap">

然后在最后一个</section>代码

之后结束你的div

这会在顶行显示您的顶部按钮，并在页面的中心位于下方第3行。

修改后的代码：

<body>
    <section>
        <a href="#" value="Off" onclick="button7()" id="button7">&#xF011;</a>
        <span></span>
    </section>
    <div id="wrap">
    <section>
        <a href="#" value="Off" onclick="button1()" id="button1">&#xF011;</a>
        <span></span>
    </section>
    <section>
        <a href="#" value="Off" onclick="button2()" id="button2">&#xF011;</a>
        <span></span>
    </section>
    <section>
        <a href="#" value="Off" onclick="button3()" id="button3">&#xF011;</a>
        <span></span>
    </section>
    </div>
</body>

Answer 5

如果您不想更改HTML，除了发布的内容之外，还可以使用以下样式：

body {
    text-align: center;
}
section:first-child ~ section {
    display: inline-block;
    vertical-align: top;
}

http://jsfiddle.net/ryanwheale/ML7sK/

我建议使用包含div的类似＆＃34;按钮＆＃34;并在你的风格中使用它：

.buttons {
    text-align: center;
}
.buttons > section:first-child ~ section {
    display: inline-block;
    vertical-align: top;
}

http://jsfiddle.net/ryanwheale/ML7sK/1/

HTML和CSS按钮定位

5 个答案: