Как разместить div в правой части экрана

Это очень простая задача, касающаяся css. Я пытаюсь разместить панель поиска в самом правом углу экрана, но когда я добавляю/уменьшаю добавку к div, строка поиска остается в одном месте, но размер экрана увеличивается горизонтально. Вот код, чтобы лучше понять:Как разместить div в правой части экрана

<!DOCTYPE html> 
<!-- 
To change this license header, choose License Headers in Project Properties. 
To change this template file, choose Tools | Templates 
and open the template in the editor. 
--> 
<html> 
    <head> 

     <meta charset="UTF-8"> 
     <title>cats</title> 

    </head> 
    <body> 
    <form class="form_style"> 
     <input type="text" class="search" placeholder="Search me..." required> 
     <input type="button" class="button" value="Search"> 
    </form> 

    <div id="top_menu"> 
     <ul> 
     <li><a href="suomeksi.php">Suomeksi</a></li> 
     <li><a href="log_in.php">Log in</a></li> 
     <li><a href="sign_in.php">Sign in</a></li> 

    </ul> 

    </div> 

    <style type="text/css" media="screen"> 

    #top_menu { 

     height: 35px; 
     font-size: 18px; 
     text-align: center; 
     border-radius: 8px; 
      } 

    #top_menu li { 
     display: inline; 
     padding: 20px; 
      } 

    #top_menu a { 
     text-decoration: none; 
     color: #00F; 
     padding: 1px 1px 1px ; 
      } 

    .form_style { 
     width:500px; 
     margin:50px ; 
     position: absolute; 

     left: 80%; 
     top:-40px; 
      } 

    .search { 
     padding:8px 15px; 
     background:rgba(50, 50, 50, 0.2); 
     border:0px solid #dbdbdb; 
      } 

    .button { 
     position:relative; 
     padding:6px 15px; 

     left:-5px; 
     border:2px solid #207cca; 
     background-color:#207cca; 
     color:#fafafa; 
      } 

    .button:hover { 
     background-color:#fafafa; 
     color:#207cca; 
      } 


    </style> 


    </body> 
</html>

и вот снимок экрана

enter image description here

источник

2014-10-09 Cash Vai

добавить поплавок: право; на элемент (form_style i believe) –

для элемента с абсолютным позиционированием 'right: 0px'. – nilobarp

это не трюк –

Вы можете просто сделать это:

.form_style { 
    width:500px; 
    margin:50px ; 
    float:right; 
    top:-40px; 
}

источник

2014-10-09 15:09:05

это сделало трюк! Большое спасибо –

Ваш CSS для правой выровненных элемента должен содержать right:0

Может быть, вы также должны удалить определения ширины и маржи

.form_style { 
    /* width: 500px;*/ 
    /* margin: 50px; */ 
    position: absolute; 
    right: 0; 
}

источник

2014-10-09 14:56:31 yunandtidus

это не сработало –

Действительно, он работает. Дело в том, что вы 500px form_style приклеены вправо, а 250px пусты и, кажется, пробел – yunandtidus

Попробуйте это ......

.form_style { 
     position: relative; 
     margin-top:-18px; 
     float:right; 
     right:-18px; 
     top:0px; 
    }

источник

2014-10-09 15:11:44

Привет, Пол, и добро пожаловать в StackOverflow. Этот ответ был помечен для обзора из-за его длины. На SO мы пытаемся отказать в ответах только на код, предпочитая какое-то объяснение решения для сопровождения кода. Пожалуйста, прочитайте [ответ] –

Сначала на все, что вам нужно удалить значение маржи для формы стиля, затем позицию вправо не со значением left и выровнять содержание:

.form_style { 
    width:500px; 
    margin:50px ;  //Make this 0; 
    position: absolute; 
    right:0;   //Add Right and remove left 
    top:0;   //Make this 0; 
    text-align:right; //Align the elements inside form to the right 
}

Проверить это Demo Fiddle

источник

2014-10-09 15:14:14 DaniP

попробуйте

.form_style 
    { 
    position: absolute; 
    right: 0; 
}

он должен работать

источник

2014-10-09 15:30:24 Goenka

Как разместить div в правой части экрана

ответ

Смежные вопросы