Как переместить кнопку в html
Перейти к содержимому

Как переместить кнопку в html

  • автор:

 

Как переместить кнопку в html?

5ef5eaab81c4b911150168.png
Хочу переместить кнопку в право, но как это делать? И как ещё убрать линии на кнопке?
P.s хотел ещё спросить. Как сделать задний фон этой шапки другим цветом? допустим красным

  • Вопрос задан более двух лет назад
  • 4375 просмотров
  • Facebook
  • Вконтакте
  • Twitter

ArsenyMatytsyn

С помощью CSS. В данном кейсе для смещения кнопки отлично подойдет flex, с марджином или space-between-ориентацией.

А фон просто через background-color.

  • Facebook
  • Вконтакте
  • Twitter

ArsenyMatytsyn

SlavaMaxwell

  • Facebook
  • Вконтакте
  • Twitter

nykakdelishki

Линии убрать border:none;
А переместить так же как и любой другой объект с помощью маржинов и пэдингов.

Можете задать position: absolute ;
и переместить с помощью top ,bottom,left ,right
только нужно задать родителю position к примеру relative

HTML how to move the button to the right

Sorry, if the question is dumb because I am just a beginner in HTML. How to move my button to the right? I have tried some ways but it doesn’t seem to work. Here is my code.

pavel's user avatar

7 Answers 7

Many ways how to do that, for example float

pavel's user avatar

With the help of CSS float property, you can align elements accordingly. Demo

streletss's user avatar

You can also move you button to right by applying text-align: right; to it’s parent. In your case it’s parent is body.

So you can apply css like:

Note: It make your p tag also align to right.

ketan's user avatar

Depending on how much space you want to move it to the right add this to .button_example:

Pindakaas's user avatar

You can also do it as a percentage:

It will move when resizing the page, whereas with pixels it will try to stay at 100px from the left of the page. It all depends on the result you want when resizing the window.

I found for my button I had to use:

 

Obviously, play around with your own right px, and do it on the developer tools in the browser to get it perfect, but that is what worked for me.

Spinstaz's user avatar

    The Overflow Blog
Related

Most asked in [html]

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.3.11.43304

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

как переместить кнопку вправо в html

На моем веб-сайте я создал всплывающее окно для вставки сведений о пользователе. В этой форме я использую две кнопки: одна предназначена для сохранения, а другая — для всплывающего окна «Отмена». И я хочу переместить обе кнопки в правую часть страницы. Обе кнопки помещены в отдельный tr с td .

Я использовал style=»width: 100px; float:right;»

Но без изменений.

Мой модальный всплывающий код

Код кнопки

Снимки экрана

enter image description here

2 ответа

У вас установлена ​​ширина <table> : 100%?

Это хорошо работает в моей системе, когда ширина установлена ​​на 100%.

Установите ширину ближайшего родительского элемента этих двух кнопок так, чтобы

сдвиги блоков, div, кнопок, картинок и т.п. CSS, Bootstrap

чтобы объект “съехал” нужно применить к нему стиль float:

  • left; – влево
  • right; – вправо

сдвигает весь элемент, включая рамку, отступы и ширину рамки в указанном направлении (влево или вправо).

в Bootstrap это организовано добавлением класса уже содержащего этот стиль:

xx – число от 1 до 12 ширина сдвига, равная ширине колонки такого же формата. Эта ширина задается в процентах и ее можно увидеть в boostrap.css файле

отличия всех -sm-, -xs-,-md- классов в том, что у Boostrap есть 3 основных вида разрешения экрана контролируемых через

для сдвига вправо:

  • col-sm-push-xx
  • col-xs-push-xx
  • col-md-push-xx

для сдвига влево:

  • col-sm-pull-xx
  • col-xs-pull-xx
  • col-md-pull-xx

чтобы сдвинуть колонки ВЛЕВО за счет увеличения свойства CSS margin-left (левого промежутка или поля между колонками) нужно использовать эти классы CSS из комплекта Boostrap:

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *