CSS: позиционирование компонентов с использованием полей - PullRequest
Новая
       23

CSS: позиционирование компонентов с использованием полей

0 голосов
/ 10 января 2012

На изображении ниже вы можете видеть, что у меня есть две вкладки help и Instructions, я хочу разместить эти две вкладки рядом друг с другом, где в данный момент находится вкладка Справка.Когда я использую свойство margin-left:, только кнопка справки перемещается влево, а кнопка instructions остается на том же месте.

Css, который я использую для настройки этого: 

    .v-csslayout-topbarapplicant .v-button,
.v-csslayout-topbarapplicant .v-nativebutton,
.v-csslayout-topbarapplicant-invert .v-button,
.v-csslayout-topbarapplicant-invert .v-nativebutton {
    float: right;
    display: inline;
    margin-right:0px;
    margin-left: 268px;
    margin-top: -18px;
    padding: 0 3px 2px 0;

line-height: 11px;
    }

Как я могу изменить интервал, чтобы обе вкладки (компоненты vaadin) перемещались вместе?enter image description here enter image description here

Ответы [ 2 ]

1 голос
/ 10 января 2012

Вы должны убедиться, что оба элемента завернуты в div. Затем вы устанавливаете margin-left на div, а не только на один из элементов.

Нет никакого способа сообщить в CSS, что вы разместили, с какими элементами манипулируют. Если оба эти элемента, «help» и «Instructions», находятся в CSS, который вы разместили, вам нужно изменить его так, чтобы оба элемента существовали как один, то есть в одном div. Если в вашем CSS, который вы опубликовали, существует только один из этих элементов, то у вас есть только один из них, манипулируемый CSS, и этот элемент является плавающим. Убедитесь, что оба предмета перемещены в одном направлении и завернуты. Примените поле к этой оболочке div.

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

CSS: 

#help, #instructions {
       float: right; 
 }        

   div#wrapper {
       margin-left: 268px;
     ] /* wrapper containing both items, "help" and "Instructions" */

HTML: 

<div id="wrapper">
   <div id="help"></div>
   <div id="instructions"></div>
</div>
0 голосов
/ 10 января 2012

Я думаю, что у вас есть некоторые проблемы с наследованием.Я бы посоветовал сначала проверить, каково наследование этого свойства, и, если у вас все еще есть проблемы, я бы создал отдельные div для справки и инструкций, где у инструкций есть другое правое поле.Надеюсь, это поможет!Проблемы такого типа упрямы.

...