如何在带有数字的圆圈后写文本

时间:2015-04-03 21:57:24

标签: html css

所以,我正在努力解决我的HTML代码中发生的奇怪事情。

我一直试图这样做3天或更长时间,但我根本找不到问题'。



.variola {
  max-width: 100%;
  margin-top: 0.5em;
  margin-bottom: 1em;
  -webkit-box-shadow: rgba(0, 0, 0, 0.199219) 0px 0px 20px;
  background: white;
  border: 1px solid #CCC;
  border-bottom-left-radius: 5px 5px;
  border-bottom-right-radius: 5px 5px;
  border-top-left-radius: 5px 5px;
  border-top-right-radius: 5px 5px;
  padding: 8px;
  "

}
</style> <style> .cerculet {
  display: block;
  font-size: 120%;
  line-height: 145%;
  width: 1.6em;
  height: 1.6em;
  text-align: center;
  border-radius: 50%;
  background-color: black;
  color: white;
  white-space: nowrap;
}
</style> <style> .introducere {
  display: table-cell;
  vertical-align length: 5;
  padding-left: 3em;
  padding-top: 0.1em;
}
&#13;
<!DOCTYPE html>
<html>

<head>
  <!-- Aici va fi scris orice cod CSS pentru ca ulterior sa fie "preluat" intr-un
mod indirect de catre codul HTML pentru imbogatirea paginii web. -->

  <title>10 cele mai periculoase boli care au facut istorie</title>
</head>

<body>
  10 cele mai periculoase boli care au facut istorie
  <!-- Tot codul de la tag-ul "body" deschis pana la "body" inchis este strict
codul pentru pagina web.Cei in head sub tag-ul "style" este cod in CSS si 
nu va aparea in pagina web,ci va "imbogati" intr-un mod indirect codul html -->

  <p style="text-align: left">
    <img align="absmiddle" src="http://s2.postimg.org/6zkw8piph/Time.png">26-Martie-2015 &nbsp;&nbsp;&nbsp;&nbsp;
    <!-- "&nbsp" este un cod important folosit pentru a crea un blank(spatiu alb)
intre 2 caractere -->
    <img align="absmiddle" src="http://s29.postimg.org/tkzbm9nwz/Domeniu.png">Biologie
    <br>
    <img align="absmiddle" src="http://s22.postimg.org/k7tec39x9/Tags.png">Tags: Pandemii, cele mai periculoase</p>
  <hr noshade size="2" style="text-align: left" width="47%">
  <br>
  <!-- Cu ajutorul tag-ului "hr" se pot introduce linii in pagina web.

"noshade" inseamna ca linia nu o sa aiba contur. -->

  <h2></h2>

  <div class="cerculet">
    <div>
      <h2>1 </h2>

      <div>
        <h2>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <big style="font-weight: bold">A ucis mai mult de 300 de
                milioane de oameni<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                din intreaga lume in secolul al XX-lea si pe cei<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                mai multi locuitori nativi ai Americii.</big> 
                <!-- Exact ceea ce spuneam mai sus:codul CSS va fi "preluat" indirect din "head"
si va fi introdus in codul html,combinand cele 2 limbaje. -->
                 <!-- :-) --></h2>
      </div>
    </div>
  </div>
  <br>

  <div>
    Variola(cunoscuta si sub numele latin "Variola" sau "Variola vera") este o boala contagioasa
    <br>unica oamenilor.Variola este cauza fie de virusul numit Variola Major,fie de cel numit Variola
    <br>minor.Forma mai letala,V. Major,are o mortalitate de 30-35%,pe cand V. Minor este o forma
    <br>mai usoara a bolii numita alastrim si ucide ~1% din victimele sale.Efectele secundare
    <br>de termen lung pentru supravietuitori includ cicatrici pe piele.Alte efecte secundare ocazionale
    <br>includ orbire datorita ulcerului de cornee si infertilitate la persoanele de sex masculin.
  </div>
  <!-- Tag-ul "br" sectioneaza textul nostru din pagina web in paragrafe. -->
  <br>
  <br>

  <div>
    <b>Variola a ucis aproximativ 60 de milioane de europeni,</b> incluzand cinci monarhi
    <br>care conduceau Europa in secolul al XVIII-lea.Pana la 30% din cei infectati,80% fiind copii sub 5
    <br>ani,au murit datorita acestei boli si inca o treime din supravietuitori au devenit orbi.
  </div>
  <br>
  <br>

  <div>
    Cat despre tarile din America,dupa primul contact cu europenii si africanii,unii au crezut ca rata
    <br>de mortalitate de 90-95% a populatiei native din Lumea Noua a fost cauza de boala Lumii Vechi.
    <br>Se suspecteaza ca variola a fost principalul vinovat si raspunzator pentru uciderea a aproape toti
    <br>locuitorii nativi ai Americii.In Mexic,cand aztecii s-au angajat in rascoala impotriva lui Cortés,
    <br>depasiti numeric,spaniolii au fost fortati sa fuga.In timpul luptei,un soldat spaniol purtator de
    <br>variola a murit.Dupa lupta,aztecii au contractat virusul din cadavrele invadatorilor.Cand Cortés
    <br>s-a intors in capitala,variola a devastat populatia azteca.A ucis o mare parte din armata azteca,
    <br>imparatul si 25% din populatia normala.Ulterior,Cortés a infrant cu usurinta aztecii si a intrat in
    <br>Tenochtitlán unde a aflat ca variola a ucis mai multi azteci decat au ucis tunurile.
  </div>
  <br>
  <br>

  <div>
    Variola a fost responsabila pentru aproximativ 300-500 de milioane de decese in secolul al XX-lea.
    <br>Nu mai tarziu de 1967, Organizatia Mondiala a Sanatatii (OMS) a estimat ca 15 milioane de persoane
    <br>au contractat virusul si ca alte doua milioane au murit in acel an.Dupa campanii de vaccinare incheiate
    <br>cu succes in timpul secolelor XIX si XX,OMS-ul a oficializat eradicarea variolei in 1979.Pana in ziua de
    <br>astazi,variola este singura boala infectioasa care a fost complet eradicata din natura.
  </div>
  <img class="variola" src="http://s3.postimg.org/cb0l49sw3/Variola.jpg" style="position:absolute; left:150px;">
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>

  <div class="cerculet">
    <div style="font-family: Cambria; font-size: 120%">
      2
    </div>
  </div>
  <!-- Aici am folosit CSS-ul pentru a da un stil imaginii urmat de codul
html specific imaginii "style="position...." pentru a aseza imaginea in pozitia
dorita de mine -->
</body>

</html>
&#13;
&#13;
&#13;

正如你所看到的,在数字1(黑色,圆圈着色)之后,有很多我不想要的空间。

对齐也不好。我使用了很多&nbsp<br>,因为我无法找到一种方法将文字放在数字1之后我试图建立一个网站&#34;对于一个学校项目,我被允许看到其他网站,以鼓励&#34;我自己。你可以查看http://www.oddee.com/item_90608.aspx

然后看看我正在尝试&#34;复制&#34;以某种方式。

请帮忙。

1 个答案:

答案 0 :(得分:0)

简而言之,您希望float: left数字/圈,以便内容环绕它。您还有几个不必要的元素,就像您提到的那样,不必要的&nbsp;元素 - 下面,我已经将示例清理为一个简单的工作示例。

.cerculet {
  display: block;
}
.cerculet:after {
  display: block;
  clear: both;
  content: ' ';
}
.cerculet p{
  font-weight: bold;
}
.cerculet h2{
  font-size: 120%;
  line-height: 145%;
  width: 1.6em;
  height: 1.6em;
  text-align: center;
  border-radius: 50%;
  background-color: black;
  color: white;
  white-space: nowrap;
  float: left;
  margin-right: 15px;
}
<div class="cerculet">
  <h2>1 </h1>
  <p>A ucis mai mult de 300 de milioane de oameni din intreaga lume in secolul al XX-lea si pe cei mai multi locuitori nativi ai Americii.
  </p>
</div>

<p>Variola(cunoscuta si sub numele latin "Variola" sau "Variola vera") este o boala contagioasa unica oamenilor.Variola este cauza fie de virusul numit Variola Major,fie de cel numit Variola minor.Forma mai letala,V. Major,are o mortalitate de 30-35%,pe cand V. Minor este o forma mai usoara a bolii numita alastrim si ucide ~1% din victimele sale.Efectele secundare de termen lung pentru supravietuitori includ cicatrici pe piele.Alte efecte secundare ocazionale includ orbire datorita ulcerului de cornee si infertilitate la persoanele de sex masculin.
</p>

<p><b>Variola a ucis aproximativ 60 de milioane de europeni,</b> incluzand cinci monarhi care conduceau Europa in secolul al XVIII-lea.Pana la 30% din cei infectati,80% fiind copii sub 5 ani,au murit datorita acestei boli si inca o treime din supravietuitori au devenit orbi.
</p>