Как правильно выровнять div, содержащий форму в другом div?

Это мой заголовок.Как правильно выровнять div, содержащий форму в другом div?

enter image description here

Моя цель состоит в том, чтобы переместить кнопку выхода из системы в крайнее правое положение, не теряя способность, нажав на них.

Теперь я пробовал положение относительное и абсолютное, и это перемещает кнопку вправо, но тогда кнопки больше не доступны для клика.

добавление позиции линии: относительная; на # my-menus (делает кнопки незаметными)

Я также попытался добавить проставку или сделать мою кнопку выхода из системы больше, но это не сработало. ширина застряла до 125 пикселей, что бы я ни делал. (Те, которые не кажутся действительными решениями, хотя ...)

Как есть, кнопки можно щелкнуть.

Что я делаю неправильно? Меня больше интересует, почему это происходит тогда, как это исправить, поскольку я могу жить с текущим результатом. Кроме того, если я полностью использую неправильный подход со всеми div, а что нет, дайте мне знать. Я хочу учиться.

Вот HTML и CSS файлы:

<body> 
    <div id="header"> 
     <div id="title"> 
      <div> 
       <img src="styles\monkey-head-pic-hi.png" alt=""> 
       RotoMonkey 
      </div> 
      <div id="userGreeting"> 
       <p>Welcome <%=session.getAttribute("name")%>!</p> 
      </div> 
     </div> 
     <div id="my-menus"> 
      <div> 
       <form method="get" action="homePageForm.jsp"> 
        <input class="menuItem" type="submit" value="Home"> 
       </form> 
      </div> 
      <div> 
       <form method="get" action="loginForm.jsp"> 
        <input class="menuItem" type="submit" value="Members"> 
       </form> 
      </div> 
      <div> 
       <form method="get" action="loginForm.jsp"> 
        <input class="menuItem" type="submit" value="Player Stats"> 
       </form> 
      </div> 
      <div> 
       <form method="get" action="loginForm.jsp"> 
        <input class="menuItem" type="submit" value="Create League"> 
       </form> 
      </div> 
      <div> 
       <form method="get" action="loginForm.jsp"> 
        <input class="menuItem" type="submit" value="Join league"> 
       </form> 
      </div> 
      <div id="logout">  
       <form method="get" action="loginForm.jsp"> 
        <input class="menuItem" type="submit" value="Logout"> 
       </form> 
      </div>   
     </div> 
    </div> 
</body>

#header 
{ 
    width:100%; 
} 

#header div 
{ 
    width:1000px; 
} 

#title 
{ 
    background-color:white; 
    height:75px; 
    color:Green; 
    font-size: 40px; 
} 

#title div 
{ 
    float:left; 
    width:500px; 
    height:75px; 
} 

img 
{ 
    max-width: 100%; 
    max-height: 100%; 
    margin:5px; 
    vertical-align: middle; 
} 

#userGreeting 
{ 
    position:relative; 
    font-size: medium; 
} 
#userGreeting p 
{ 
    position:absolute; 
    bottom:0; 
    right:0; 
    margin: 0; 
    padding: 0; 
    margin-right: 20px; 
    margin-bottom:5px; 
} 

#my-menus 
{ 
    background-color:green; 
    overflow:hidden; 
    width:1000px; 
    height:auto; 
    z-index:-2; 
} 

#my-menus div 
{ 
    display:inline-block; 
    height:auto; 
    text-align:center; 
    border-right:thin solid white; 
    width:125px; 
} 

/* #logout */ 
/* { */ 
/* position:absolute; */ 
/* right:0; */ 
/* } */ 

body { 
    width: 1000px; 
    margin: 50px auto; 
    border-radius: 5px; 
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2), 
       inset 0px 1px 0px 0px rgba(250, 250, 250, 0.5); 
} 

input[type=submit] { 
    border: green; 
    background: transparent; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#64c8ef', endColorstr='#00a2e2',GradientType=0); 
    color: #fff; 
    padding: 5px 5px; 
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3); 
    z-index:-10; 
}

источник

2013-03-24 Andre Viau

является то, что это то, что вы пытаетесь выполнить? Fiddle

Я просто добавил:

#logout { 
    float:right; 
}

Проблема заключается в том, что все ваши div элементы inline-block и они держат укладку инлайн. Ваш position: relative сделал кнопки unclickable, потому что #my-menus имеет z-index: -2 и получает наложенный #header элемент.

источник

2013-03-24 19:11:40

Боже, кажется, сейчас так просто. Спасибо за объяснение. Хотя, почему мои кнопки являются кликабельными в первую очередь? # my-menes находится в заголовке, поэтому z-индекс относится к #header? –

Это тоже должно быть потому, что мне нужно переполнение: hiden для зеленой полосы, чтобы показать .... Спасибо кучу! –

Согласно документации, свойство 'z-index' применяется только тогда, когда вы явно назначаете свойство' position'. Вот почему он не накладывается без «позиции: относительный». –

Вы можете использовать этот код в CSS для правого выравнивания DIV

div{float:right;}

источник

2013-03-24 19:11:40

Как правильно выровнять div, содержащий форму в другом div?

ответ

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