使用css

Question

我的应用程序在窗口中有一个批次按钮。在为此编写HTML文档页面时，我已经成功创建了一个有边界的，有组织阴影的CSS＆lt; span＆gt;其中的文字代表了只有传说的按钮。

这让我可以展示＆＃34;瞬间＆＃34;像这样的按钮...

......只是在他们身上有一个传说，以便通过简单地把...简单地说明我所描述的...

＆lt; span id =＆＃34;按钮＆＃34;＆gt; LAP＆lt; / span＆gt;

...与相关描述一致（我的自定义文档系统让我通过 [s button LAP] 调用内联样式变得更加容易。有趣。:)这里＆＃39 ;我为此建立的风格：

span#button
{
    font-family: Courier;
    font-weight: bold;
    white-space: pre;
    border: 1px solid #000000;
    background: #ddddee;
    padding-left: 2px;
    padding-right: 2px;
    color: #000000; 
}

以下是使用该技术的部分文档的屏幕截图：

同样在应用程序中，我的按钮有＆＃34; LED＆＃34;他们的指标。典型的一个可能在打开时显示绿色LED，在关闭时显示暗LED。应用程序中的屏幕剪辑（带有深色样式表，因此按钮很暗）显示其中一些：

我已经有了很好的小.jpg图像，可以显示所有＆＃34; LED＆＃34;我使用的颜色，相反，填充正确颜色的嵌入式CCSS盒也可以。

我想做什么，而且没有运气，就是创建一个＆lt; span＆gt;在文本中看起来至少有点像这些按钮之一 - 没有针对每个按钮的特定图像，或者换句话说，使用CSS。由于唯一不同的是LED和文本，我希望能够将LED和文本输入。有点像...

＆lt; span id =＆＃34; greenbutton＆＃34;＆gt;运行＆lt; / span＆gt;

为了做到这一点，我需要LED在文本上方 ，并将文本的大小设置得足够小，以便放在它下面，并将它们放在一个有边框的中心，因为它只是文本上面的版本。我想要一个像这样的输出（图像处理器内置的按钮）......

按开始

......来自：

按＆lt; span id =＆＃34; greenbutton＆＃34;＆gt; RUN＆lt; / span＆gt; 开始

似乎应该足够容易;如果需要让它全部工作，我可以在我的文档系统中添加相当多的复杂性 - 多个嵌套的跨度，div，图像，测试，无论它需要什么 - 但我一直遇到这两个showstoppers：

• ＆LT;跨度＆GT;希望事情一个接一个地横向发展
• ＆LT; DIV＆GT;导致换行或向左或向右浮动

我似乎无法获得＆lt; div＆gt;虽然我已经能够让他们像我想要的那样看因为他们理解垂直对齐和定位他们自己，所以只是放在我把它放在首位的文本中。上下文。

我还想到了一些按钮的实际图像，在每个LED状态下从中删除了文本，用作跨度的背景，其中文本覆盖在该背景上，从而看起来像一个特定的按钮。我没试过这个，因为我似乎无法找到如何让跨度有背景和＆lt; div＆gt; ... a＆lt; div＆gt;不会停留在我想要的地方（不是左或右，但是就在那里，否则如果它没有浮动则不要破坏它们。

我也不反对将表格内联。如果我知道如何...

我希望我能错过一些东西。在哪种情况下，帮助！或者这是不可能的，唯一的解决方案是屏蔽每个状态中的许多按钮（有些按钮实际上显示多种LED颜色用于各种设置，更糟糕的是）然后将图像放在我想要的位置？因为虽然我可以这样做，但它非常笨拙和努力。 ：（

Answer 1

在“之前”引入伪元素！当当！

<p>Green button</p>
<span class="myButton greenbutton">RUN</span>
<p>Red button</p>
<span class="myButton redbutton">RUN</span>
<p>Click this purple button <span class="myButton purplebutton">RUN</span> here.</p>

<style>    
span.myButton {
    display:inline-block;
    border-top: 2px solid #eee;
    border-left: 2px solid #eee;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    padding:1px 2px 0;
    background: #dde;
    width:20px;
    height:auto;
    font-size:10px;
    font-family:monospace;
    text-align:center;
}
span.myButton:before {
    display:block;
    margin:2px auto 0;
    width: 16px;
    height: 5px;
  border: 1px solid #000;
  content: "";
}

span.greenbutton:before {background:#99FF00;}
span.redbutton:before {background:#FF0043;}
span.purplebutton:before {background:#A200C1;}

</style>

更新的答案：我将跨度上的显示更改为内联块，因此它将进入一个段落。我在之前的回答中错过了这个要求。

我在每个范围中添加了一个类，因此文档中的所有范围都不会受到影响，只会影响具有该类的范围。

从技术上讲，如果您要使用多个绿色按钮，则不应使用ID。 ID应该是唯一的，因此只在文档中使用一次。所以我也把它转换成了一个类。

在CSS中，句点表示一个类，而不是表示id的＃符号。 Ergo：span.myButton以“myButton”类为目标。 span.greenbutton以类绿色按钮为目标。你可以在一个元素上有多个类。

我将span-color属性带出了span：在样式之前，并将其置于特定于类的样式中 - ＆gt; span.greenbutton：前。基本上，span.myButton和伪元素span.myButton：before的类对于所有这些按钮都是相同的。但是对于每种颜色，在跨度上放置一个额外的类，并使用您想要的背景颜色为它创建一个类。希望很清楚。小提琴也更新了。

https://jsfiddle.net/maguijo/05zwwjy6/