Question

我试图将我的电子邮件发送到我的名字下方，但我不能为我的生活找出方法。谷歌没有帮助。这只是一个练习页面。我正在学习。

这是我目前的css和html

＆＃13;

   #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;
   }

＆＃13;

<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>

＆＃13;

Answer 1

将H1的样式放入标题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重命名为类.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;

来自#email的

没有理由设置这些。已添加到父级的text-align:center会将电子邮件地址置于中心位置。

如何提高文字？

3 个答案: