Entfernen von Leerraum auf der rechten Seite einer Seite

Ich bin mir bewusst, dass dies sehr einfach ist, aber ich habe versucht, so viele Möglichkeiten, den weißen Bereich auf der rechten Seite meiner Seite zu entfernen, noch ein kleines Problem für mich als ein Lerner. Die Zeichen_in und Paratext sind inline wie gezeigt, aber wenn ich die Ränder und Paddings auf 0 gesetzt habe, um den Leerraum von der rechten Seite meiner Seite zu entfernen, bewegt sich die Anmeldung (das Anmeldeformular) unter dem Paratext, anstatt inline zu bleibenEntfernen von Leerraum auf der rechten Seite einer Seite

Quelle

2017-04-02 Anonymous

'Seite' ist kein gültiges HTML-Tag. Und es gibt hier nicht genug, um Ihnen bei der Fehlersuche zu helfen. – CollinD

Sie müssen ein [minimales, vollständiges und überprüfbares Beispiel] (https://stackoverflow.com/help/mcve) zu Ihrem Problem bereitstellen. Ansonsten können wir Ihnen nicht helfen. – alljamin

@CollinD In Ordnung, ich habe meine Frage aktualisiert und hoffe, dass sie klarer genug ist. –

Hier gehen Sie. Hoffe das hilft dir.

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>

Quelle

2017-04-03 01:59:36

ich Ihren Code Stile durch Entfernen irrelevant row Klassen und Inline-Refactoring haben. Sie haben auch sign_in{width:70%} angegeben, aber nicht angegeben, was 100% ist, also fügte ich body{width:100%} hinzu. Außerdem habe ich einige Paddings und Ränder auskommentiert, die Sie im folgenden Beispiel sehen können.

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>

diesen Code Beispiel in einem Projekt versuchen und sehen, ob das Problem weiterhin besteht. Wenn Sie immer noch ein Problem haben, müssen Sie Ihre Frage mit dem Rest der Codebasis aktualisieren, die Sie haben.

Quelle

2017-04-03 02:27:27 alljamin

Entfernen von Leerraum auf der rechten Seite einer Seite

Antwort

Verwandte Themen