Wie verschiebe ich den Text innerhalb eines Divs nach links?

Ich habe eine Vorlage für eine persönliche Webseite. Ich möchte das Leerzeichen im div # content verwenden, das auf der linken Seite ist, aber ich kann nicht herausfinden, was zu tun ist, um den Text nach links zu verschieben, ohne die Seitenleiste div entweder nach unten oder woanders zu verschieben. Dies ist der CSS-Code:Wie verschiebe ich den Text innerhalb eines Divs nach links?

#content { 
    float: right; 
    width: 605px; 
    margin: 0; 
    padding-left: 170px; 
    border-left: 1px solid #ddd; 
} 
.sidebar { 
    width: 150px; 
    padding-left: 1px; 
    float: left; 
}

Ich habe ein Bild angehängt, die Sie in dem Link sehen können (ich immer noch nicht genug Punkte habe es hier zu laden). Die Texte innerhalb des div sind in einem "p".

image of the template

Dies ist der HTML-Code für den Inhalt und die Seitenleiste:

<div id="content"> 
     <h2>Introduction</h2> 
     <p>Welcome to exalted, a free valid CSS &amp; XHTML strict web template from <a href="http://www.spyka.net" title="spyka webmaster">spyka Webmaster</a>. 
      This template is <strong>free</strong> to use permitting a link remains back to <a href="http://www.spyka.net" title="spyka webmaster">http://www.spyka.net</a>. 
      Should you wish to use this template unbranded you can buy a template license from our website for 5.00 GBP, this will allow you remove all branding related to our site, 
      for more information about this see below.</p> 

     <p>This template has been tested in:</p> 
     <ul> 
      <li>Firefox 3.5</li> 
      <li>Opera 10.00</li> 
      <li>IE 7 and 8</li> 
      <li>Chrome</li> 
     </ul> 

     <h3>Buy unbranded</h3> 
     <p>Purchasing a template license for 5.00 GBP (at time of writing around 7.40 USD) gives you the right to remove any branding including links, logos and source tags relating to spyka webmaster. Payments are processed using paypal, with which we are a verified member, via the licensing page on our website which can be accessed at <a href="http://www.spyka.net/licensing" title="template license">http://www.spyka.net/licensing</a></p> 

     <h3>More free web templates</h3> 
     <p>Looking for more free web templates for other projects? Check out our <a href="http://justfreetemplates.com/portfolio?user=spyka">free web template portfolio</a>. We also offer <a href="http://www.spyka.net/wordpress-themes">WordPress themes</a> and <a href="http://www.awesomestyles.com">phpBB3 styles</a>, all of which are released under Open Source or Creative Commons licenses!</p> 

     <h3>Webmaster forums</h3> 
     <p>You can get help with editing and using this template, as well as design tips, tricks and advice in our <a href="http://www.spyka.net/forums" title="webmaster forums">webmaster forums</a></p> 

    </div> 

    <div class="sidebar"> 
     <ul>  
      <li> 
       <h4><span>Navigate</span></h4> 
       <ul class="blocklist"> 
        <li><a href="index.html">Home</a></li> 
        <li><a href="examples.html">Examples</a></li> 
        <li><a href="#">Products</a></li> 
        <li><a href="#">Solutions</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </li> 

     </ul> 
    </div>

Quelle

2017-03-27 Mr. Munoz

Warum haben Sie eine Füllung von 170px auf dem Inhalt übrig? –

Versuchen Sie, die Padding-Links auf 0 auf 0 setzen – chbchb55

So ist die Vorlage entworfen. Ich bin kein Designer, sondern versuche nur zu verstehen, wie das funktioniert. –

Ich glaube nicht, dass Sie die

padding-left: 170px;

In diesem Fiddle muss ich die padding- geändert links auf 0 und neu angeordnet die # sidebar div über die # content div. und machte sie beide

float: left;

Ich hoffe, das hilft Ihr Problem. Die Verwendung von Bootstrap wäre hier meiner Meinung nach sehr nützlich, aber ich weiß nicht, ob Sie es in Ihrer Situation verwenden dürfen.

Quelle

2017-03-27 14:59:47

Ich benutze AJAX. Ich werde mit deiner Antwort testen. –

Danke, Kevin. Sie haben der Lösung etwas Licht gegeben. Ich benutzte deine Technik mit dieser Variante deines Vorschlags und es funktionierte gut für mich: #content { float: right; Breite: 710px; Rand: 0px; padding-links: 15px; Grenze-links: 1px fest #ddd; } .Sidebar { \t Breite: 200px; \t padding-links: 1px; \t Schwimmer: links; } –

Kein Problem @ Mr.Munoz, froh, dass ich in irgendeiner Weise helfen könnte. Viel Glück damit! –

Wenn Sie Text nach links in einem Div ausrichten möchten, können Sie text-align: left verwenden. Der Text ist standardmäßig standardmäßig nach links ausgerichtet.

Für Ihren spezifischen Fall finden Sie möglicherweise flexbox, um nützlich zu sein.

Mit dem Zusatz von einem übergeordneten Container (main), die nur CSS müssen Sie sich wie folgt:

main { 
    display: flex; 
} 

#content { 
    border-left: 1px solid #ddd; 
    flex: 1; 
}

ich auch die Reihenfolge der .sidebar und #content Elemente nicht nach hinten umgeschaltet werden. Hier

ist eine Demo http://codepen.io/JKudla/pen/yMxXYZ?editors=1100

Quelle

2017-03-27 15:21:47

Ich schätze Ihren Vorschlag, @ Kudla69. Das ist neu für mich. Ich werde es überprüfen. Vielen Dank. –

Ich denke, das das Problem löst:

#content { 
float: right; 
width: 710px; 
margin: 0px; 
padding-left: 15px; 
border-left: 1px solid #ddd; 
} 

.sidebar { 
    width: 200px; 
    padding-left: 1px; 
    float: left; 

}

solved

Dank Kevin zu helfen.

Quelle

2017-03-27 15:33:32

Wie verschiebe ich den Text innerhalb eines Divs nach links?

Antwort

Verwandte Themen