如何凸起文本？

Question

我想把我的电子邮件提高到我名字的正下方，但我一辈子都弄不明白怎么做。 Google 没有帮助。这只是一个练习页面。我正在学习中。

这是我当前的 css 和 html

   #email {
     position: relative;
     margin: -19px;
     right: -100px;
   }
   div:nth-child(2) {
     border: 2px solid black;
     width: 400px;
     border-radius: 5px;
     background-color: #EEE0E5;
   }
   #name {
     border: 2px solid black;
     width: 370.5px;
     position: relative;
     color: red;
     padding: 1em;
     background-color: #EEE0E5;
     border-radius: 5px;
     text-align: center;
     padding-left: 10px;
   }

<div id="header">
  <h1 id="name">Marika Devan</h1>

  <a href="mailto:marikadevan@gmail.com">
    <p id="email">marikadevan@gmail.com</p>
  </a>



</div>
<div class="right">
  <h3>Objective:</h3>
  <p>to become a tour guide.</p>
  <h4>Experience</h4>
  <p>tour guide</p>
  <ul>
    <li>Take groups of students around the museum</li>
    <li>assist at the different exhibits</li>
    <li>answering questions anyone may have</li>
  </ul>
  <p>pizza maker</p>
  <ul>
    <li>make pizza</li>
    <li>assist customer</li>
    <li>chill by the oven</li>
  </ul>



</div>

Answer 1

将 H1 的样式放入 header div，然后删除您的电子邮件样式。

需要进行一些调整才能使其与 HTML 的底部很好地对齐，但您的电子邮件现在位于您的姓名下方 http://jsfiddle.net/hrcm1tfb/

HTML

<div id="header">
  <h1 id="name">Marika Devan</h1>
  <a href="mailto:marikadevan@gmail.com"><p id="email">marikadevan@gmail.com</p></a>
</div>

CSS

#header{
border: 2px solid black;
width: 370.5px;
position: relative;
color: red;
padding: 1em;
background-color: #EEE0E5;
border-radius: 5px;
text-align: center;
padding-left: 10px;
}

Answer 2

问题出在您为您的名字添加到#name ID 的样式。

如果您将电子邮件和您的姓名包裹在 div 中。

http://jsfiddle.net/u1k00Lnr/

HTML

<div id="header">
    <div class="name">
      <h1 id="name">Marika Devan</h1>
      <a href="mailto:marikadevan@gmail.com"><p id="email">marikadevan@gmail.com</p></a>
    </div>

</div>

CSS

我还将#name ID 重命名为 class .name

   .name {
    border: 2px solid black;
    width: 370.5px;
    position: relative;
    color: red;
    padding: 1em;
    background-color: #EEE0E5;
    border-radius: 5px;
    text-align: center;
    padding-left: 10px;
    }

Answer 3

我建议您将样式应用于 #header 而不是 h1:

#header{
  border: 2px solid black;
  width: 370.5px;
  position: relative;
  color: red;
  padding: 1em;
  background-color: #EEE0E5;
  border-radius: 5px;
  text-align: center;
  padding-left: 10px;
}

#name {
 //add styles you want
}


#email {
  font-size: 14px;
 //add styles you want
}

FIDDLE

我还要删除：

position: relative;
margin: -19px;
right: -100px;

from #email 没有理由设置这些。 text-align:center 已添加到父项的电子邮件地址将以其自身为中心。

如何凸起文本？

How to bump up text?

html

css