Question

我是CSS和HTML的新手。创建CSS形状时，其位置在实际的CSS代码中定义。在HTML中使用形状时，有没有办法可以修改位置，这样我可以重复使用不同位置属性的相同形状，而不必为每个新位置声明另一个CSS形状？

.navbutton {
    position: fixed;
    left: 0em;
    top: 8em;
    width: 33%;
    height: 1.75em;
    background: red;
    color: black;
    font-size: 1.5em;
    text-align: center;
    padding-top: 0.5em;
}

如果我要使用这个按钮彼此相邻制作多个导航按钮，我该怎么办呢？

感谢。

哦，我不懂任何其他网络语言（Javascript，PHP等）。

Answer 1

是的，您可以看到此链接：ReuseCSSnavButton

3个按钮的这个链接THREE LINKS

HTML

 <div class="navbutton">first</div>
<div class="navbutton">second</div>
<div class="navbutton">third</div>
<div class="navbutton">fourth</div>

CSS

.navbutton {
position: relative;
float:left;
width: 100px;
height: 40px;
background: red;
color: black;
font-size: 1.5em;
text-align: center;
padding-top: 0.5em;
margin-right: 0.5em;

}

Answer 2

您可以使用.navbutton类定义多个html元素，然后使用内联样式属性单独设置其位置，如下所示：

<div class="navbutton" style="left:  5px; top: 20px;"></div>
<div class="navbutton" style="left: 20px; top:  5px;"></div>
<div class="navbutton" style="left:  8px; top: 13px;"></div>

如果您希望导航按钮彼此相邻显示，可以将它们放在容器中，如下所示：

<div class="navbutton-container">
    <div class="navbutton">Button 1</div>
    <div class="navbutton">Button 2</div>
    <div class="navbutton">Button 3</div>
    <div class="navbutton">Button 4</div>
</div>

然后让每个按钮向左浮动，它们将彼此相邻显示，如果它们超过容器的大小，则将它们包裹到下一行。

.navbutton-container {
    position: fixed;
    left: 0em;
    top: 8em;
    width: 100%;
}

.navbutton {
    float: left;
    width: 33%;
    height: 1.75em;
    background: red;
    color: black;
    font-size: 1.5em;
    text-align: center;
    padding-top: 0.5em;
}

这是一个显示结果的JSFiddle：http://jsfiddle.net/sarathijh/mw96Q/

Answer 3

由于您可以在导航中使用不同的数字按钮，具体取决于您所在的视图，我建议您从按钮类中获取宽度。这样的事情（Example） CSS

.navbutton {
    height: 1.75em;
    background: red;
    color: black;
    font-size: 1.5em;
    text-align: center;
    padding-top: 0.5em;
    float:left;
}
.size-4buttons div
{
    width:25%;
}

HTML

<nav class="size-4buttons">
    <div class="navbutton">Button 1</div>
    <div class="navbutton">Button 2</div>
    <div class="navbutton">Button 3</div>
    <div class="navbutton">Button 4</div>
</nav>

Answer 4

position: fixed会打破你的流量。

尝试这样的事情：

.navbutton {
    position:relative;
    float:left;
    left: 0em;
    top: 8em;
    width: 33%;
    height: 1.75em;
    background: red;
    color: black;
    font-size: 1.5em;
    text-align: center;
    padding-top: 0.5em;
}

http://jsfiddle.net/jnbS5/2/

3个相同形状的物体并排： - ）

如果您想在它们之间休息，请添加保证金。

http://jsfiddle.net/jnbS5/1/

重用CSS形状

4 个答案: