Question

从float：center移动我的div容器时;浮动：左;

理想情况下我喜欢触摸div底部的按钮＆＃34; self＆＃34;

它在我的联系人按钮下面增加了额外的空间。有什么建议？我试过玩边距，填充，溢出：隐藏; div容器里面的等等。自己在CSS文件中，但没有运气。

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Steven Amerman">
    <meta name="pragma" content="no-cache">
    <link rel="stylesheet" type = "text/css" href="..\css\index.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


    <title>Steven Amerman</title>
</head>
<body>
    <div class="self">
        <img src="..\images\Steven.png" alt="Steven Amerman" style="width:100%">
        <h1>Steven Amerman</h1>
        <p class="title">Software Developer</p>
            <ul class="school">
                <li><img src="../images/wvuIcon.png" id="wvuIcon" alt="WVU" style="width:20px; height:20px">   West Virginia University</li> 
            </ul>   
            <p class="degrees">B.S. in Computer Science</p>
         <a href="https://www.linkedin.com/in/steven-amerman/"><i class="fa fa-linkedin-square"></i></a> 
        
        <p><button>Contact</button></p>
    </div>
</body>
</html>

＆＃13;

textView.maxLines = 1

＆＃13;

extra space no space

Answer 1

问题出在p标记的包含联系人按钮的边距上。您应该将其边距更改为0，例如：

.self p:last-child{
  margin-bottom: 0px;
}

Answer 2

只需删除底部按钮周围的<p></p>标记即可。

body {
  /*background-color: rgb(17, 17, 17);*/
  background-color: ghostwhite;
}

.self {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  height: auto;
  margin: auto;
  text-align: center;
  font-family: sans-serif;
  background-color: ghostwhite;
  float: left;
}

.title {
  color: black;
  font-family: sans-serif;
  font-size: 18px;
}

ul.school {
  list-style: none;
  list-style-position: inside;
  padding-left: 0;
  margin-left: 0;
}

 .degrees {
  color: black;
  font-family: sans-serif;
  font-size: 14px;
}

button {
  border: none;
  outline: 0;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

a {
  text-decoration: none;
  font-size: 22px;
  color: black;
}

button:hover,
a:hover {
  opacity: 0.7;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="Steven Amerman">
  <meta name="pragma" content="no-cache">
  <link rel="stylesheet" type="text/css" href="..\css\index.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


  <title>Steven Amerman</title>
</head>

<body>
  <div class="self">
    <img src="..\images\Steven.png" alt="Steven Amerman" style="width:100%">
    <h1>Steven Amerman</h1>
    <p class="title">Software Developer</p>
    <ul class="school">
      <li><img src="../images/wvuIcon.png" id="wvuIcon" alt="WVU" style="width:20px; height:20px"> West Virginia University</li>
    </ul>
    <p class="degrees">B.S. in Computer Science</p>
    <a href="https://www.linkedin.com/in/steven-amerman/"><i class="fa fa-linkedin-square"></i></a>

    <button>Contact</button>
  </div>
</body>

</html>

float：center - ＆gt;向左飘浮; div容器在底部添加空间

2 个答案: