Jump to content
Sign in to follow this  
Magmus

Znacznik Input nie współpracuje z buttonem submit. Wysokość

Recommended Posts

Witam mam problem lecz nie wiem jak go rozwiązać bo mam input i przycisk lecz ten przycisk nie jest na wysokości tego inputu a nie wiem jak to zrobić żeby był  pomoże ktoś ?
 

screen:

Spoiler

 

 mój kod html:

				<form class="form-szukaj">
					<input type="text" placeholder="Szukaj..">
					  <a type="submit" style="margin-top:-5px;"><i class="fa fa-search" aria-hidden="true"></i></a>
				</form>

css:

    .form-szukaj {
        width: 370px;
		height:30px;
		margin-top:10px;
    }
    .form-szukaj input {
        width: 330px;
        height: 20px;
        padding: 5px 5px;
        float: left;    
        font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
        border: 0;
		background: #444;
		background: rgba(0,0,0,0.2);
        -moz-border-radius: 3px 0 0 3px;
        -webkit-border-radius: 3px 0 0 3px;
        border-radius: 3px 0 0 3px;      
       color: #999;
    }
    .form-szukaj input:focus {
        outline: 0;
    background: #444;
    background: rgba(0,0,0,.2);
        -moz-box-shadow: 0 0 2px rgba(0,0,0,0.3) inset;
        -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.3) inset;
        box-shadow: 0 0 2px rgba(0,0,0,0.3) inset;
    }
    .form-szukaj input::-webkit-input-placeholder {
       color: #999;
       font-weight: normal;
       font-style: italic;
    }
    .form-szukaj input:-moz-placeholder {
       color: #999;
        font-weight: normal;
        font-style: italic;
    }
    .form-szukaj input:-ms-input-placeholder {
       color: #999;
        font-weight: normal;
        font-style: italic;
    }    
    .form-szukaj a {
        position: relative;
		float:none;
        border: 0;
		text-align:center;
        cursor: pointer;
        width: 30px;
		padding:7.5px;
        font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
        color: #1975A3;
        text-transform: uppercase;
		background: #444;
		background: rgba(0,0,0,0.3);
        -moz-border-radius: 0 3px 3px 0;
        -webkit-border-radius: 0 3px 3px 0;
        border-radius: 0 3px 3px 0;      
        text-shadow: 0 -1px 0 rgba(0, 0 ,0, 0.3);
    }   
    .form-szukaj a:hover{		
		background: #444;
		background: rgba(0,0,0,0.3);
    }	
    .form-szukaj a:active,
    .form-szukaj a:focus{   
		background: #444;
		background: rgba(0,0,0,.2);
    }
    .form-szukaj a:before {
        content: '';
        position: absolute;
        border-width: 8px 8px 8px 0;
        border-style: solid solid solid none;
        border-color: transparent rgba(0,0,0,.1) transparent;
        top: 8px;
        left: -8px;
    }
    .form-szukaj a:hover:before{
        border-right-color: rgba(0,0,0,.1);
    }
    .form-szukaj a:focus:before{
        border-right-color: rgba(0,0,0,.1);
    }    
    .form-szukaj a::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

 

Share this post


Link to post

CSS

#search {
    float: right;
    margin-top: 9px;
    width: 250px;
}

.search {
    padding: 5px 0;
    width: 230px;
    height: 30px;
    position: relative;
}

    .search input {
        line-height: 18px;
        padding: 0 2px 0 2px;
        border-radius:1px;
    }

        .search input, .search input {
            width: 200px;
            margin-left: 0;
        }

.btn {
    height: 30px;
    position: absolute;
    right: 0;
    top: 5px;
    border-radius:1px;
}

HTML

<div class="container">
	<div class="row">
        <div class="search">
<input type="text" class="form-control input-sm" maxlength="64" placeholder="Search" />
 <button type="submit" class="btn btn-primary btn-sm">Search</button>
</div>
	</div>
</div>

Źródło: http://bootsnipp.com/snippets/featured/slider-search-box

  • Like 2

Share this post


Link to post

input i przycisk fajny tylko szkoda że nie ten styl a może mi ktoś pomóc przy tym kodzie ? bo chciał bym ten styl mieć

Share this post


Link to post
17 minut temu, Magmus napisał:

input i przycisk fajny tylko szkoda że nie ten styl a może mi ktoś pomóc przy tym kodzie ? bo chciał bym ten styl mieć

Pokaż jak to wygląda lub ma wyglądać na screenie, bo odtworzyłem Twój kod i nie wiem czego się złapać.

  • Like 1

Share this post


Link to post

@Magmus obrazek w 1 poście nie działa. Jak chcesz by to wyglądało bo nie mam podglądu na to, a samym kodem nie będę się sugerował.

  • Like 1

Share this post


Link to post

 a teraz ? Jeśli tak to widać że ten przycisk po prawej jest niżej od inputu a chciałem by był na tej samej wysokości

Share this post


Link to post

@Magmus próbowałeś zamiast position: relative; dać absolute? Albo za float: none; daj float: left; Masz jakiś link by to zobaczyć?

Edited by ARISovsky
  • Like 1

Share this post


Link to post

nie mam a próbowałem dodać a nwm co tu wykombinować  

A jak wezmę dam tak 

    .form-szukaj a {
        position: absolute;
		float:none;
        border: 0;
		text-align:center;
        cursor: pointer;
        width: 20px;
		height:20px;
		padding:7.5px;
        font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
        color: #1975A3;
        text-transform: uppercase;
		background: #444;
		background: rgba(0,0,0,0.3);
        -moz-border-radius: 0 3px 3px 0;
        -webkit-border-radius: 0 3px 3px 0;
        border-radius: 0 3px 3px 0;      
        text-shadow: 0 -1px 0 rgba(0, 0 ,0, 0.3);
    }   

to co prawda jest na tej samej wysokości ale ucina mi tą ikonkę w środku i nie da się jej ustawić  

Share this post


Link to post

Według mnie wszystko gryzie się z tym width.

 

@Magmus spróbuj dodać ten kod

   .form-szukaj {
        width: 370px;
		height:30px;
    }
    .form-szukaj input {
        width: 330px;
        padding: 5px 5px;
        float: left;    
        font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
        border: 0;
		background: #444;
		background: rgba(0,0,0,0.2);
        -moz-border-radius: 3px 0 0 3px;
        -webkit-border-radius: 3px 0 0 3px;
        border-radius: 3px 0 0 3px;      
       color: #999;
    }
    .form-szukaj input:focus {
        outline: 0;
    background: #444;
    background: rgba(0,0,0,.2);
        -moz-box-shadow: 0 0 2px rgba(0,0,0,0.3) inset;
        -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.3) inset;
        box-shadow: 0 0 2px rgba(0,0,0,0.3) inset;
    }
    .form-szukaj input::-webkit-input-placeholder {
       color: #999;
       font-weight: normal;
       font-style: italic;
    }
    .form-szukaj input:-moz-placeholder {
       color: #999;
        font-weight: normal;
        font-style: italic;
    }
    .form-szukaj input:-ms-input-placeholder {
       color: #999;
        font-weight: normal;
        font-style: italic;
    }    
    .form-szukaj a {
        position: relative;
		top: 5px;
		float:right;
        border: 0;
		text-align:center;
        cursor: pointer;
        font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
        color: #1975A3;
		padding: 5px 8px;
        text-transform: uppercase;
		background: #444;
		background: rgba(0,0,0,0.3);
        -moz-border-radius: 0 3px 3px 0;
        -webkit-border-radius: 0 3px 3px 0;
        border-radius: 0 3px 3px 0;      
        text-shadow: 0 -1px 0 rgba(0, 0 ,0, 0.3);
    }   
    .form-szukaj a:hover{		
		background: #444;
		background: rgba(0,0,0,0.3);
    }	
    .form-szukaj a:active,
    .form-szukaj a:focus{   
		background: #444;
		background: rgba(0,0,0,.2);
    }
    .form-szukaj a:before {
        content: '';
        position: absolute;
        border-width: 8px 8px 8px 0;
        border-style: solid solid solid none;
        border-color: transparent rgba(0,0,0,.1) transparent;
        top: 6px;
        left: -8px;
    }
    .form-szukaj a:hover:before{
        border-right-color: rgba(0,0,0,.1);
    }
    .form-szukaj a:focus:before{
        border-right-color: rgba(0,0,0,.1);
    }    
    .form-szukaj a::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

 

Edited by ARISovsky
  • Like 1

Share this post


Link to post

kurde no nadal ej a teraz wpadłem na pomysł jak by przed from dało się nwm diva i w cssie by się zrobiło żeby nie wychodziło więcej niż 30 px za ?

Share this post


Link to post

Zamień swój kod na mój i zobacz

Dodaj ten aktualny co teraz jest bo edytowałem go kilka razy.

  • Like 1

Share this post


Link to post

dobra chyba zrobiłem dzięki za pomoc  

Share this post


Link to post
Guest
This topic is now closed to further replies.
Sign in to follow this  
×
×
  • Create New...