2014-12-08 10 views
0

Я не уверен, как точно описать то, что я прошу, в основном мне нужно выровнять изображение слева, но слева от 6px (строка 38, margin: 10px 10px 10px 6px).Как разместить изображения в CSS

код выглядит следующим образом:

.rounded { 
 
\t width:100%; 
 
\t height:100px; 
 
\t background-color:#95b7fd; 
 
\t border-radius:100px; 
 
\t z-index:0; 
 
} 
 

 
.rounded-input { 
 
\t margin-top:5px; 
 
\t width:90px; 
 
\t height:90px; 
 
\t border-radius:100px; 
 
\t border:0; 
 
\t margin-left:-80px; 
 
\t font-weight:700; 
 
\t background-color:#fff; 
 
} 
 

 
.rounded-box { 
 
\t width:98.4%; 
 
\t height:90px; 
 
\t border-radius:100px; 
 
\t border:0; 
 
\t background-color:#3574f9; 
 
\t opacity:1; 
 
\t text-align:center; 
 
\t color:#FFF; 
 
\t margin-left:auto; 
 
\t margin-right:auto; 
 
} 
 

 
.icon { 
 
\t height:80px; 
 
\t width:auto; 
 
\t position:absolute; 
 
\t border-radius:100px; 
 
\t margin:10px 10px 10px 6px; 
 
}
<html> 
 
\t <head> 
 
\t \t <title>LsrW's Go2 Links</title> 
 
\t \t <link href="css/style.css" rel="stylesheet" type="text/css"> 
 
\t </head> 
 
\t <body> 
 

 
\t \t \t <form method="get" action="http://www.google.co.uk/search" class="rounded"> 
 
\t \t \t <img class="icon" src="images/search_Google.png"/> 
 
\t \t \t \t <center> 
 
\t \t \t \t \t <input name="q" maxlength="255" class="rounded-box"><input value="Search" type="submit" class="rounded-input"> 
 
\t \t \t </form> 
 
\t \t \t <form method="get" action="http://www.google.co.uk/search" class="rounded"> 
 
\t \t \t <img class="icon" src="images/search_Google.png"/> 
 
\t \t \t \t <center> 
 
\t \t \t \t \t <input name="q" maxlength="255" class="rounded-box"><input value="Search" type="submit" class="rounded-input"> 
 
\t \t \t </form> 
 
\t </body> 
 
</html>

Предварительный вопрос здесь: link (http://lsrw.co.uk/slider/).

Как вы можете видеть в ссылке (или если вы просматриваете код, который может или не может отображаться правильно в любом случае в зависимости от размера окна), первое окно поиска корректно работает с изображением слева, однако второй - нет.

У кого-нибудь есть идеи, как вы это исправите? (дополнительно: я открыт для предложений о том, как улучшить большую часть этого, я относительно новичок в CSS).

Спасибо,
- Люк

EDIT: Это было довольно просто исправить, извините за тупой вопрос- я совершенно забыл, что я добавил тег, замыкая, что в форме, установленной полностью.

+0

Используйте левую: 6px, а не поле: 10px 10px 10px 6px – Michael

+0

Спасибо Майкл, однако теперь верхний расклад пошел. – lsrwLuke

+0

Используйте верх: также в сочетании – Michael

ответ

1

Проблема в том, что и теги <center> не закрыты. Это приводит к неопределенному поведению.

Попробуйте закрыть оба центра теги:

 <form method="get" action="http://www.google.co.uk/search" class="rounded"> 
     <img class="icon" src="images/search_Google.png"/> 
      <center> 
       <input name="q" maxlength="255" class="rounded-box"><input value="Search" type="submit" class="rounded-input"> 
      </center> 
     </form> 
     <form method="get" action="http://www.google.co.uk/search" class="rounded"> 
     <img class="icon" src="images/search_Google.png"/> 
      <center> 
       <input name="q" maxlength="255" class="rounded-box"><input value="Search" type="submit" class="rounded-input"> 
      </center> 
     </form> 
+0

Спасибо! Фантастично ... Я совершенно забыл, что даже добавил этот тег, ваше решение было идеально. – lsrwLuke