Question

#LoginOuterBox hbox约为#FullScreenLoginWrapper宽度的一半，但停靠在屏幕的左侧。它拒绝服从父母的pack="center"或align="center"。

<vbox id="browser-panel">
   <hbox id="FullScreenLoginWrapper" pack="center"  flex="1">
      <hbox id="LoginOuterBox" pack="start" >         
         <vbox flex="1">
            <label class="header" value="Welcome"/>
            <hbox class="FieldWrapper">
               <vbox pack="center">
                  <label value="Username" class="FieldLabel" control="LoginUsername"/>
               </vbox>
               <textbox id="LoginUserName" />
            </hbox>
            <hbox class="FieldWrapper">
               <vbox pack="center">
                  <label value="Password" class="FieldLabel" control="LoginPassword"/>
               </vbox>
               <textbox type="password" id="LoginPassword" />
            </hbox>
            <hbox  class="FieldWrapper" align="right">
               <button label="Login" class="ATKButton"/>
            </hbox>
         </vbox>
         <vbox align="center" width="300px;">
            <hbox pack="center">
               <image src='chrome://myaddon/skin/swim.svg' width='200px' />
            </hbox>
         </vbox>
      </hbox>
   </hbox>
</vbox>

相应的风格：

#FullScreenLoginWrapper{
   position:fixed;
   top:0px;
   left:0px;
   right:0px;
   bottom:0px;
   z-index:2000;
   background:#272727;   
   color:#ccc;
}

#LoginOuterBox{
   border:1px solid #222;
   background:linear-gradient(#272727, #222222);
   padding:20px;
   margin:20px auto;
   border-radius:5px;

}

#FullScreenLoginWrapper label.header{
   margin-bottom:22px;
   font-size:22px;
   font-weight:normal;
   text-align:right;
}



#FullScreenLoginWrapper .FieldWrapper{
   margin-bottom:7px;
}

#FullScreenLoginWrapper textbox{
   width:200px;
}


#FullScreenLoginWrapper label.FieldLabel{
   width:95px;
   text-align:right;
   font-size:12px;
   margin-right:15px;
}

.ATKButton {
    background: linear-gradient(#333333, #222222) no-repeat scroll 1px 1px #494849;
    border: 1px solid #111111;
    border-radius: 2px 2px 2px 2px;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-size: 10px;
    font-weight: bold;
    height: 28px;
    letter-spacing: 0.1em;    
    text-transform: uppercase;
    width: 120px;
    text-align:center;
}

我想要的是相当于：

div{
margin:0px auto;
width:50%;
}

其中框在父级中心（在屏幕上）。我如何实现这一目标？

Answer 1

XUL中的

position: fixed很讨厌，并且表现不正常。

您需要通过将#LoginOuterBox包装在其他地方来解决此问题：

<hbox style="width: 100%; height: 100%;" pack="center" align="center">

此外，由于它似乎要覆盖browser.xul，请明智地选择您的DOM ID和类名，以便它们不会与浏览器或其他附加组件发生冲突，也不会与将来发生冲突。通常你通过假名称空间来做到这一点，通过为myveryuniqueaddonid-someid添加前缀。

XUL框内部位置：固定元素不对齐中心

1 个答案: