在页面的右侧删除空格

问题描述 投票:0回答:2

我知道这是很基本的,但我一直在努力消除对我的网页右侧的白色空间的很多方面,但仍它是一个小问题,我作为一个学习者。的sign_in和paratext是内联如图但是当我用设定边距和补至0至从我的网页的右侧移除空白,在符号(其是登录表单)的paratext下方移动停留内联的,而不是。

html html5
2个回答
0
投票

干得好。希望这可以帮助你。

body {
  margin: 0;
  padding: 0;
}

.sign_in {
  display: inline-block;
  width: 55%;
  font-size: 3vw;
  margin-left: 30px;
}

.paratext {
  display: inline-block;
  font-size: 3vw;
  width: 35%;
  color: #008B8B;
}
<html>
<head>
  <title>Example</title>
</head>
<body>
<div class="paratext">
  <h1>Get ready to sell Smarter, Better, Faster.</h1>
  <p>Dosty CRM is the latest e-customer relationship management system being used currently by tech companies. Easy and Secure. </p>
</div>

<div class="sign_in" id="sign_in">
  <form (ngSubmit)="submitForm(l)" #l="ngForm">

    <h1 style="color:#008B8B; font-weight: 900; font-size: 40px;" >     <b>Sign In </b></h1><br>
    <div class="row">
      <div class="col-sm-6">
        <div class="form-group">
          <label for="email">Email</label>
          <input type="text" class="form-control" id="email" name="email" placeholder="First Name" [(ngModel)]="login.email" required>

        </div>
    </div>
</div>

<div class="row">
  <div class="col-sm-6">
    <div class="form-group">
      <label for="password">Password</label>
      <input type="password" class="form-control" id="password"  name="password" placeholder="password" [(ngModel)]="login.password">
    </div>
  </div>
</div>

<div class="row">
  <div class="col-sm-3">
    <div class="form-group">
      <input type="checkbox" value="Remember Me" id="remember_me" >
      <label >Remember Me  </label>
    </div>
</div>
<div class="col-sm-3">
  <div class="form-group">
    <p class="text-right"><span class="forgot-password"><a style=" color:#008B8B;"  href="#">Forgot password?</a></span></p>
  </div>
</div>
</div>
  <div class="row">
    <div class="col-sm-2">
      <div class="form-group">
        <button class="button" type="submit" style="font-weight: 900; background-color:#008B8B;" ><span>Login </span></button>
    </div>
  </div>
</div>

  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <p class="text-right">
        <span><a style="color:#008B8B;" href="#">Already a member?</a></span></p>
      </div>
    </div>
  </div>
</form>
</div>
</body>
<html>

0
投票

我已经通过去除不相关row类和内联样式重构你的代码。您还规定sign_in{width:70%},但没有规定什么是100%,所以我加了body{width:100%}。除此之外,我注释掉了一定的填充和利润,你可以看到,在下面的例子。

body{width: 100%;}
.paratext, h1, a{color:#008B8B;}
h1{
  font-weight: 900; 
  font-size: 40px;
}
.form-group button{
  font-weight: 900; 
  background-color:#008B8B;
}
.sign_in {
  width: 70%;
  /*margin-right: -30%;*/
}
.paratext {
  display: inline-block;
  /*padding-top: 250px;*/
  font-size: 16px;
  word-wrap: break-word;
  /*width: 600px;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <div class="paratext">
      <h1>Get ready to sell Smarter, Better, Faster.</h1>
      <p>Dosty CRM is the latest e-customer relationship management system being used currently by tech companies. Easy and Secure.</p>
  </div>

  <div class="sign_in" id="sign_in">
      <form (ngSubmit)="submitForm(l)" #l="ngForm">
          <h1>Sign In</h1>

          <div class="row">
              <div class="col-sm-12">
                  <div class="form-group">
                      <label for="email">Email</label>
                      <input type="text" class="form-control" id="email" name="email" placeholder="First Name" [(ngModel)]="login.email" required>
                  </div>
              </div>
              <div class="col-sm-12">
                  <div class="form-group">
                      <label for="password">Password</label>
                      <input type="password" class="form-control" id="password"  name="password" placeholder="password" [(ngModel)]="login.password">
                  </div>
              </div>
              <div class="col-sm-12">
                  <div class="form-group">
                      <input type="checkbox" value="Remember Me" id="remember_me">
                      <label>Remember Me</label>
                  </div>
              </div>
              <div class="col-sm-12">
                  <div class="form-group">
                      <p class="text-right forgot-password"><a href="#">Forgot password?</a></p>
                  </div>
              </div>
              <div class="col-sm-12">
                  <div class="form-group">
                      <button class="button" type="submit">Login</button>
                  </div>
              </div>
              <div class="col-sm-12">
                  <div class="form-group">
                      <p class="text-right"><a href="#">Already a member?</a></p>
                  </div>
              </div>
          </div>
      </form>
  </div>
</body>

试试这个代码示例在您的项目,看看是否仍有问题。如果你仍然有问题,那么你需要更新你与你的代码库的其他问题。

© www.soinside.com 2019 - 2024. All rights reserved.