Comment supprimer supplémentaire à la droite du bouton d'entrée?

Ok Je recréer un PSD que j'ai trouvé en ligne pour m'entraîner. Dans l'en-tête, il y a une barre de recherche et un bouton. À droite du bouton, il y a un contenu supplémentaire qui occupe de l'espace, dont je ne peux pas me débarrasser.Comment supprimer supplémentaire à la droite du bouton d'entrée?

J'ai ajouté un jsFiddle

https://jsfiddle.net/jb7j6ysz/

S'il vous plaît assurer l'aperçu est étendu à la gauche autant que possible

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Education Compaony</title> 
    <link rel="stylesheet" href="style.css"> 
    </head> 
    <body> 
    <div class="header"> 
     <div class="branding"> 
     <h2>Education Department</h2> 
     <h5>A free PSD template</h5> 
     </div> <!-- /.Branding --> 
    <div class="directory"> 
     <div class="search"> 
     <input type="text"> 
     <input type="submit" value="Search"> 
     </div> <!-- /.Search --> 
     <div class="index"> 
     <ul> 
      <li>A - Z index | </li> 
      <li>Studenet Login | </li> 
      <li>Staff Login </li> 
     </ul> 
     </div> <!-- /.Index --> 
    </div> <!-- /.Directory --> 
    </div> <!-- /.Header --> 
    </body> 
</html> 

/* Font Import */ 
@import url('https://fonts.googleapis.com/css?family=Lora'); 

* { 
    box-sizing: border-box; 
} 

body { 
    margin: 0; 
    padding: 0; 
} 

.header{ 
    height: 95px;; 
    background-color: #FCD05D; 
    color: #3A302E; 
    font-family: 'Lora', sans-serif; 
} 

.branding { 
    float: left; 
    margin-left: 200px; 
} 

.branding h2 { 
    margin-top: 10px; 
    text-transform: uppercase; 
    font-size: 28px; 
} 

.branding h5 { 
    margin-top: -20px; 
    font-size: 16px; 
} 

.directory { 
    float: right; 
    margin-right: 200px; 
} 

.search { 
    background-color: black; 
    border: 5px solid black; 
    border-radius: 8px; 
    padding: 1px 0px 5px 12px; 
} 

.search input[type=text] { 
    background-color: #FCD05D; 
    border-radius: 3px; 
} 

.search input[type=submit] { 
    background-color: #595657; 
    color: #FCD05D; 
    border: 2px solid #595657; 
    border-radius: 3px; 
} 

.index ul { 
    list-style-type: none; 
    text-decoration: none; 
    margin-top: -0; 
} 

.index li { 
    margin-top: -20px; 
    font-size: 14px; 
    display: inline-flex; 
    word-spacing: 1px; 
}

Source

2017-06-29 Jack

Votre barre de recherche en-tête vous permet d'élaborer ce que vous voulez? – LKG

ajoutez la largeur: 70% à votre entrée ou n'importe quel nombre selon votre besoin – tech2017

placez la largeur pour l'annuaire ou la recherche – gvmani

L'espace supplémentaire provient de la ul où vos liens sont . Puisque la largeur est automatique, la section de liste a une plus grande largeur que votre section de recherche ainsi la section de recherche prend sur cette largeur.

Vous pouvez définir padding: 0 sur la liste ul pour réduire une partie de l'espace. Il a un rembourrage naturel à gauche. Cela laissera toujours de l'espace sur la droite en raison de la longueur de votre liste. Vous pouvez définir la largeur de la zone de recherche pour empêcher l'encapsulation de la liste. Ou vous pourriez faire flotter la section de recherche gauche, mais vous devrez ajuster le rembourrage pour le faire paraître symétrique

Voici un exemple

https://jsfiddle.net/jb7j6ysz/3/

.search { 
    background-color: black; 
    border: 5px solid black; 
    border-radius: 8px; 
    padding: 1px 12px 5px 12px; 
    float: left; 
} 
.index ul { 
    list-style-type: none; 
    text-decoration: none; 
    margin-top: 0; 
    padding: 0; 
}

je flotteur pour le nouveau violon et ajouté rembourrage 0 au ul. Ajusté également le remplissage sur .search

Source

2017-06-29 15:29:11 Huangism

vous remercie. Meilleure réponse! – Jack

Le div d'index est dans le chemin. Mettez à jour votre css avec ce

.index{ 
    position: absolute; 
    display:block; 
    left: 40%; 
}

Source

2017-06-29 15:31:20 Oluwaseye

L'espace supplémentaire vient à cause de vos objets Ul. Ajouter dans votre css

ul{ 
    padding-left:0px; 
    }

Source

2017-06-29 15:37:50

Je pense que votre problème est de faire avec la largeur de la .index div. Il et votre barre de recherche sont contenus dans le même .directory div. Parce que les deux sont des éléments de niveau bloc dont la largeur est définie sur auto par défaut, ils prennent la largeur de leur parent, qui dans ce cas est défini par le plus grand enfant, le .index div.

En définissant la barre de recherche sur display: inline-block;, la largeur de la barre de recherche est réduite.

.search { 
    ... 
    display: inline-block; 
}

De plus, le ul utilisé pour la .index div a padding-left par défaut, que vous pouvez définir autrement.

Source

2017-06-29 15:41:13

Comment supprimer supplémentaire à la droite du bouton d'entrée?

Répondre

Questions connexes