1. Zuhause
  2. Frage und Antwort
  3. Warum ist mein Symbol nicht auf der rechten Seite

Warum ist mein Symbol nicht auf der rechten Seite

2016-09-22 2 views
0

Ich habe ein Symbol, das rechts schweben sollte. Aber zwischen der rechten Seite und dem Icon ist immer viel Platz. Ich weiß nicht, warum das so ist. Aber es sollte 5px links von der rechten Seite sein. Vielleicht hat es etwas damit zu tun, dass ich die Google-Icons verwende, wie Sie es in meinem Code sehen. Wie kann ich das Icon komplett nach rechts bekommen?Warum ist mein Symbol nicht auf der rechten Seite

/* Initial body */ 
 
body { 
 
    left: 0; 
 
    margin-bottom: 100px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 

 
/* Basic styling */ 
 

 
.header { 
 
    background-color: green; 
 
    height: 100%; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
     -o-background-size: cover; 
 
      background-size: cover; 
 
} 
 

 
.icon-menu { 
 
    color: #fff; 
 
    cursor: pointer; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 16px; 
 
    padding-bottom: 10px; 
 
    padding-left: 25px; 
 
    padding-top: 10px; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
} 
 

 
.icon-menu i { 
 
    margin-top: 0px; 
 
} 
 

 
.button-group { 
 
    margin-bottom: 20px; 
 
} 
 

 
.counter { 
 
    display: inline; 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    margin-right: 10px; 
 
} 
 

 
.material-icons.md-36 { 
 
    font-size: 36px; 
 
    padding-right: 5px; 
 
    color: white; 
 
} 
 

 
.icons-right { 
 
    float: right; 
 
} 
 

 
.footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 100px; 
 
    align-text: center; 
 
} 
 

 
.nav li { 
 
    display: inline-block; 
 
    color: red; 
 
} 
 

 
html { 
 
    position: relative; 
 
    min-height: 100%; 
 
}
<!doctype html> 
 
<html lan="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="description" content="A page about me"> 
 
    <meta name="keywords" content="web developer, projects"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 

 
     <title>title</title> 
 

 
    <!-- google icons --> 
 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
    <!-- the icon font --> 
 
    <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"> 
 

 
</head> 
 
<body> 
 

 
    <div class="body"> 
 
     <div class="header"> 
 

 
      <div class="icon-menu"> 
 
        <a href="/logout"><i class="material-icons md-36 icons-right">lock outline</i></a> 
 

 
       <span class="icons-right">person</span> 
 
       <div class="click"><i class="material-icons md-36">menu</i></div> 
 

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

 
</body> 
 
</html>

Quelle

2016-09-22 Tristan T

+0

Ich habe die Frage nicht vollständig verstanden. Was ich herausgefunden habe, ist, dass und mit dem Element verknüpft sind. Wenn Sie eine davon deaktivieren, erhalten Sie möglicherweise das gewünschte Verhalten. – Knu8

+0

Nein, es wird immer noch viel zu weit sein. –

+0

Ich werde diese CSS löschen, um es klarer zu machen. –

Antwort

0

Hier geht es. Fügen Sie einfach eine Breite zum Schlosssymbol hinzu.

body { 
 
    left: 0; 
 
    margin-bottom: 100px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 

 
/* Basic styling */ 
 

 
.header { 
 
    background-color: green; 
 
    height: 100%; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
     -o-background-size: cover; 
 
      background-size: cover; 
 
} 
 

 
.icon-menu { 
 
    color: #fff; 
 
    cursor: pointer; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 16px; 
 
    padding-bottom: 10px; 
 
    padding-left: 25px; 
 
    padding-top: 10px; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
} 
 

 
.icon-menu i { 
 
    margin-top: 0px; 
 
    margin-right: 5px; 
 
} 
 

 
.button-group { 
 
    margin-bottom: 20px; 
 
} 
 

 
.counter { 
 
    display: inline; 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    margin-right: 10px; 
 
} 
 

 
.material-icons.md-36 { 
 
    font-size: 36px; 
 
    padding-right: 5px; 
 
    color: white; 
 
} 
 

 
.icons-right { 
 
    float: right; 
 
} 
 

 
.footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 100px; 
 
    align-text: center; 
 
} 
 

 
.nav li { 
 
    display: inline-block; 
 
    color: red; 
 
} 
 

 
html { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 

 
.lock-icon{ 
 
    width: 10%; 
 
}
<!doctype html> 
 
<html lan="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="description" content="A page about me"> 
 
    <meta name="keywords" content="web developer, projects"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 

 
     <title>title</title> 
 

 
    <!-- google icons --> 
 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
    <!-- the icon font --> 
 
    <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"> 
 

 
</head> 
 
<body> 
 

 
    <div class="body"> 
 
     <div class="header"> 
 

 
      <div class="icon-menu"> 
 
        <a href="/logout"><i class="material-icons md-36 icons-right lock-icon">lock outline</i></a> 
 

 
       <span class="icons-right">person</span> 
 
       <div class="click"><i class="material-icons md-36">menu</i></div> 
 

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

 
</body> 
 
</html>

Quelle

2016-09-22 15:23:03 Stormhashe

1

Es ist auf der rechten Seite ist, ist der Behälter sowieso - aber es ist so breit wie der verfügbare Raum ... hart, da seine transparent zu erzählen.

Wenn Sie der Klasse = "material-icons md-36 icons-right" eine Breite (sagen wir 20px) geben, wird das Symbol nur diese Breite ausfüllen und auf der rechten Seite sein.

Quelle

2016-09-22 15:27:51

0

Dies ist eine ziemlich einfache Art und Weise, es zu tun:

button { 
    padding: 1em; 
    padding-left: 1.5em; 
    padding-right: 1.5em; 
    padding: 3em; 
    width: 400px; 
} 
button img { 
    height: 4em; 
    width: auto; 
    margin: -1.25em; 
    margin-left: 2em; 
} 
button p { 
    display: inline; 
    font-size: 2em; 
}

Der Grund, warum ich ist eine Schaltfläche hier verwendet habe, weil standardmäßig es seinen Inhalt Zentren, obwohl jede Form von horizontaler Zentrierung (das funktioniert auch auf block s).

Tweak die margin und margin-left der img und die font-size der p, bis Sie mit dem Ergebnis, bequem sind.

Quelle

2016-09-22 15:28:27 Crowes

0

Ich habe es getan, indem die .material-icons.md-36 geben eine negative margin-right

.material-icons.md-36 { 
    font-size: 36px; 
    padding-right: 0px; 
    margin-right: -250px; 
    color: white; 
}

nun auf der rechten Seite es ist.

Quelle

2016-09-22 15:31:48

Verwandte Themen

 Verwandte Themen