Question

我是ARIA标签的新手。如果我是愚蠢的，那么请原谅。

当我点击向下箭头时，我想要的是自定义下拉菜单。

问题是弹出窗口写在图标下方，如图所示。

CSS

＆＃13;

.vertical-align {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        }
        .bkcolor {
        background-color: #009cf6;
        width: 305px;
        /*#008bdd*/
        }

＆＃13;

<html>
   <head>
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

   </head>
   <body>
   <div id="app">
   <div id="container">
    <div class="row" style="background:#009DF8;" id="namebardiv">
       <div class="col-xs-10 col-md-5">
         <div class="row">
           <div class="col-xs-3 col-md-3">
           </div>
           <div class="col-xs-6 col-md-6">
             <div class="row" style="color: white;font-size: 11px;">
             </div>
           </div>
           <div class="col-xs-3 col-md-3">
           </div>
         </div>
         <div class="row vertical-align">
           <div class="col-xs-3 col-md-3">
              <i class="icon-arrow-left21 pull-right" style="color:white;font-size:30px;"></i>
           </div>
           <div class="col-xs-7 col-md-7">
             <div class="row vertical-align">
                <div class="col-xs-7 col-md-7" style="color: white; font-size: 35px;display: inline-block;">
                   Benarsi Das
                </div>
                <div class="col-xs-1 col-md-1 dropdrown">
                   <div class="dropdown-toggle" style="color: white; font-size: 35px;display: inline-block;" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <span class="caret"></span>
                   </div>
                   <ul class="dropdown-menu bkcolor" aria-labelledby="dropdownMenu1" style="min-height: 165px;">
                     something
                   </ul>
                </div>
                <div class="col-xs-4 col-md-4">
                   <span style="color: white;font-size: 23px;padding-top: 10px;"></span>
                </div>
             </div>
           </div>
           <div class="col-xs-2 col-md-2">
           </div>
         </div>
       </div>
       <div class="col-xs-1 col-md-1"></div>
       <div class="col-xs-10 col-md-5 vertical-align">
          <div class="row">            
          </div>
       </div>
       <div class="col-xs-1 col-md-1"></div>
    </div>
</body>
</html>

＆＃13;

但我需要这样的

我知道我可以使用此代码实现它

＆＃13;

.vertical-align {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        }
        .bkcolor {
        background-color: #009cf6;
        width: 305px;
        /*#008bdd*/
        }

＆＃13;

<html>
   <head>
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

   </head>
   <body>
   <div id="app">
   <div id="container">
    <div class="row" style="background:#009DF8;" id="namebardiv">
       <div class="col-xs-10 col-md-5">
         <div class="row">
           <div class="col-xs-3 col-md-3">
           </div>
           <div class="col-xs-6 col-md-6">
             <div class="row" style="color: white;font-size: 11px;">
             </div>
           </div>
           <div class="col-xs-3 col-md-3">
           </div>
         </div>
         <div class="row vertical-align">
           <div class="col-xs-3 col-md-3">
              <i class="icon-arrow-left21 pull-right" style="color:white;font-size:30px;"></i>
           </div>
           <div class="col-xs-7 col-md-7">
             <div class="row dropdown" id="dropdownrow">
                 <div class="dropdown-toggle" style="color: white; font-size: 35px; width:210px;display: inline-block;" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    <div id="dropdownlabel" style="color: white; font-size: 35px;display: inline-block;width:180px;font-family:'Roboto-Regular',san-serif">
                       Benarsi Das
                    </div>
                    <span class="caret"></span>
                 </div>
                 <ul class="dropdown-menu bkcolor" aria-labelledby="dropdownMenu1" style="min-height: 165px;">
                   something
                 </ul>              
              </div>
           </div>
           <div class="col-xs-2 col-md-2">
           </div>
         </div>
       </div>
       <div class="col-xs-1 col-md-1"></div>
       <div class="col-xs-10 col-md-5 vertical-align">
          <div class="row">            
          </div>
       </div>
       <div class="col-xs-1 col-md-1"></div>
    </div>
</body>
</html>

＆＃13;

但即使单击了文本，这也会使下拉列表（弹出窗口）可见。我希望它仅在单击下拉图标时才可见。

非常感谢任何帮助。

Answer 1

在样式表中，添加声明

transform: translate(-60px, 26px);

指向.bkcolor的样式规则。

NB 您可以更改 x-translate （-60px）和 y-translate （26px ）以实现您想要的精确定位。

工作示例：

＆＃13;

.vertical-align {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        }
        
        .bkcolor {
        background-color: #009cf6;
        width: 305px;
        /*#008bdd*/
        transform: translate(-60px, 26px);
        }

＆＃13;

<html>
   <head>
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

   </head>
   <body>
   <div id="app">
   <div id="container">
    <div class="row" style="background:#009DF8;" id="namebardiv">
       <div class="col-xs-10 col-md-5">
         <div class="row">
           <div class="col-xs-3 col-md-3">
           </div>
           <div class="col-xs-6 col-md-6">
             <div class="row" style="color: white;font-size: 11px;">
             </div>
           </div>
           <div class="col-xs-3 col-md-3">
           </div>
         </div>
         <div class="row vertical-align">
           <div class="col-xs-3 col-md-3">
              <i class="icon-arrow-left21 pull-right" style="color:white;font-size:30px;"></i>
           </div>
           <div class="col-xs-7 col-md-7">
             <div class="row vertical-align">
                <div class="col-xs-7 col-md-7" style="color: white; font-size: 35px;display: inline-block;">
                   Benarsi Das
                </div>
                <div class="col-xs-1 col-md-1 dropdrown">
                   <div class="dropdown-toggle" style="color: white; font-size: 35px;display: inline-block;" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <span class="caret"></span>
                   </div>
                   <ul class="dropdown-menu bkcolor" aria-labelledby="dropdownMenu1" style="min-height: 165px;">
                     something
                   </ul>
                </div>
                <div class="col-xs-4 col-md-4">
                   <span style="color: white;font-size: 23px;padding-top: 10px;"></span>
                </div>
             </div>
           </div>
           <div class="col-xs-2 col-md-2">
           </div>
         </div>
       </div>
       <div class="col-xs-1 col-md-1"></div>
       <div class="col-xs-10 col-md-5 vertical-align">
          <div class="row">            
          </div>
       </div>
       <div class="col-xs-1 col-md-1"></div>
    </div>
</body>
</html>

＆＃13;

在主div下定位HTML5 ARIA弹出窗口

1 个答案: