Question

我是HTML和CSS的新手，事实上这是我尝试用它做的第一件事。

我正试图做一个小钥匙。

我想要装箱的钥匙（围绕文字的宽度，而不是页面宽度）以及要用红色和蓝色着色的名称。请原谅，我不知道如何最好地代表它。

             ---------------------
             |        Key:       |
             |                   |
             | Matt (in Blue)    |
             | Kerry (in Red)    |
             ---------------------

键位于框的中心。 Key和Matt之间有一个空格。并没有空间，而是Matt和Kerry之间的新界限。

我没有双重＆lt; / BR取代。如果我将每个名称分别设为＆lt; p为H.然后他们之间有一个空间。无论哪种方式，我都不确定如何为这些名称单独着色，据我所知，我的红色和蓝色css类（.r和.b）必须在标签中使用，但我只能在一个单独使用一个类＆LT; H1＆GT;或者＆lt; p＆gt;，对吧？

以下是我在CSS中的内容

    .b {
            color: blue;}
    .r {
            color: red;}
    .key { 
            border-style: groove;}

和我的HTML

  <p class="key">Key:</p>
  <p class="b">Matt</p>
  <p class="r">Kerry</p>

只在单词键周围创建一个框，虽然它正确着色，但我不想要的名称之间有一个空格。

解决方案：

    .b {
            color: blue;
            }
    .r {
            color: red;}
    .key { 
            border-style: groove;
            width:75px;}
    .centre {
            text-align:center;

和HTML

<p class="key centre">Key:<br><br>
<span class="b">Matt <br> </span>
<span class="r">Kerry <br> </span>
Both <br>

Answer 1

这样做

<div class="key">
  <p>Key:</p>
  <p class="b">Matt</p>
  <p class="r">Kerry</p>
</div>

单词之间的间距可以用css边距完成。

.b{
    margin: 0px;
}

Answer 2

你需要用你的<p>包裹一些东西，可能是<div>：

<div class="key">
    <p>Key:</p>
    <p class="b">Matt</p>
    <p class="r">Kerry</p>
</div>

要控制框的宽度，您可以使用width css属性：

.key {
    width:300px;
}

（还有其他方法可以让盒子的宽度不是整个宽度，例如，如果你将它漂浮或绝对定位，盒子会自动适合内容。）

要使'key'文本居中，您可能希望使用text-align:center，可能使用类或使用:first-of-type伪类：

.center {
    text-align:center;
}

.key p:first-of-type {
    text-align:center;
}

您可以在元素上使用多个类，只需用空格分隔它们，例如<div class="key center">

您还可以在一个规则集中引用多个类，如下所示：

.r, .b {
    margin:0;
}

这样红色和蓝色文本之间就没有间距了。

如何装箱和单独为此文字上色？

2 个答案: