html - 如何让文本与我的 CSS 编号和圆圈在同一行？

Question

这是一个两部分的问题:

第一个问题是我在 CSS 中创建了一个圆圈，里面有一个数字。如何用颜色填充圆圈？

第二个问题是如何让“机会 #1”与“圆圈内有数字”位于同一行

所以我希望它是这样的:

1 机会 #1我们总是有兴趣结识志同道合、富有创造力的人加入我们的团队。请将您的求职信、简历和作品集提交至以下电子邮件地址，进行 self 介绍。

这是 jsfiddle:http://jsfiddle.net/huskydawgs/0236oyce/19/

这是我的代码:

<div class="circle"><span class="number">1</span></div>
<h3>Opportunity #1</h3>
<p>We are always interested in meeting like-minded, creative individuals to join our team. Please introduce yourself by submitting your cover letter, resume and portfolio to the email below.</p>

这是我的 CSS:

.circle {
border: 0.1em solid grey;
border-radius: 100%;
height: 2em;
width: 2em;
text-align: center;

.circle .number {
    margin-top: 0.10em;
    font-size: 1.5em;
    font-weight: bold;
    font-family: sans-serif;
    color: #F66511;
}

h3 {
    font-family:Arial,Helvetica,sans-serif;
    font-size:16px;
    color:#232323;
    margin:0 0 10px 0;
    text-align:left;
    font-weight:bold;
}

p {
    font-family:Arial,Helvetica,sans-serif;
    font-size:16px;
    color:#616161;
    margin:0 0 0 50px;
    text-align:left;
    font-weight:normal;
}

Answer 1

选项 1

使用 float :

.circle {
    border: 0.1em solid grey;
    border-radius: 100%;
    height: 2em;
    width: 2em;
    text-align: center;
    background:#fc0;
    float:left;
    margin:0 20px;
}

.circle .number {
    margin-top: 0.10em;
    font-size: 1.5em;
    font-weight: bold;
    font-family: sans-serif;
    color: #F66511;
}

h3 {
    font-family:Arial,Helvetica,sans-serif;
    font-size:16px;
    color:#232323;
    margin:0 0 10px 0;
    text-align:left;
    font-weight:bold;
}

p {
    font-family:Arial,Helvetica,sans-serif;
    font-size:16px;
    color:#616161;
    margin:0 0 0 50px;
    text-align:left;
    font-weight:normal;
    clear:both;
}

See fiddle here

选项 2

使用 block

.header {
    display:block;
}
.circle {
    border: 0.1em solid grey;
    border-radius: 100%;
    height: 2em;
    width: 2em;
    text-align: center;
    background:#fc0;
    display:inline-block;
    vertical-align:middle;
    margin:0 20px;
}
.circle .number {
    margin-top: 0.10em;
    font-size: 1.5em;
    font-weight: bold;
    font-family: sans-serif;
    color: #F66511;
}
h3 {
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    color:#232323;
    display:inline-block;
    vertical-align:middle;
    text-align:left;
    font-weight:bold;
}
p {
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    color:#616161;
    margin:0 0 0 50px;
    text-align:left;
    font-weight:normal;
    clear:both;
}

See fiddle here