2017-04-26 52 views
0

我想让我的下拉列表的位置为中心。但是,当我做了为什么我的下拉列表不能位于中心位置?

align="center"

的posistion不在中心

这里是我的代码:

<?php 

/* @var $this yii\web\View */ 



$this->title = 'Beranda - Pascasarjana Dalam Angka'; 
?> 
<div class="site-index"> 

    <div class="jumbotron"> 
     <h1>Selamat Datang!</h1> 

     <p class="lead-lg-5">Aplikasi ini ditujukan untuk menampilkan <br>data-data dan statistik mahasiswa program Pascasarjana Universitas</p> 


    <div align="center" class="body-content"> 


    <div align="center" class="dropdown"> 
     <button align="center" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Pilih Tahun Periode 
      <span class="caret"></span> 
     </button> 
       <ul align="center" class="dropdown-menu"> 
        <li><a href="#">Periode 2001-2005</a></li> 
        <li><a href="#">Periode 2006-2010</a></li> 
        <li><a href="#">Periode 2011-2015</a></li> 
       </ul> 
    </div> 



    </div> 


    </div> 

</div> 

,这里是结果:

enter image description here

我该怎么做才能让l ist可能在中心? 在此先感谢

+0

.dropdown菜单编辑css.i认为会有浮动内:离开;使用 –

回答

0

把下拉菜单中的一个div然后对齐该潜水使用CSS防爆出现在中心:

/* centers the form div to the screen */ 
#divCenter{ 
    position:absolute; 
    width:800px; 
    top:50%; 
    left:50%; 
    margin-top:-180px; 
    margin-left:-410px; 
    z-index:15; 
    border-radius: 10px; 
} 
+0

你几乎从来不应该使用px –

+0

这是我用记事本编码尝试赋予它的一种习惯,但老习惯很难消除。 – Sand

+0

这个人改变了这个问题吗? – Sand

0

应用相对位置属性的家长和位置绝对的下拉元素包装。

.dropdown { 
    position: relative; 
} 

.dropdown .dropdown-menu { 
    position: absolute; 
    top: 50px; 
    width: 100%; 
} 

希望这会有所帮助。

0

我的建议:使用带有yii2的内置引导类!这是您的视图文件的一个工作示例。短前面回答:你必须把下拉机制.btn-group

<?php 
use yii\helpers\Url; 
use yii\helpers\Html; 
use yii\bootstrap\Dropdown; 
/* @var $this yii\web\View */ 

?> 
<div class="site-index"> 

    <div class="jumbotron"> 
     <h1>Selamat Datang!</h1> 
     <p class="lead-lg-5"> 
      Aplikasi ini ditujukan untuk menampilkan <br> 
      data-data dan statistik mahasiswa program Pascasarjana Universitas 
     </p> 
    </div> 
    <div class="col-md-12 school-options-dropdown text-center"> 
     <div class="dropdown btn-group"> 
      <a href="#" data-toggle="dropdown" class="dropdown-toggle">Pilih Tahun Periode <b class="caret"></b></a> 
      <?php 
       echo Dropdown::widget([ 
        'items' => [ 
         ['label' => 'Periode 2001-2005', 'url' => '#'], 
         ['label' => 'Periode 2001-2005', 'url' => '#'], 
         ['label' => 'Periode 2001-2005', 'url' => '#'], 

        ], 
       ]); 
      ?> 
     </div> 
    </div> 
</div> 
+0

它正在工作。非常感谢。上帝保佑你;) – r34627673

+0

欢迎你。标记为已接受。 – R13e

相关问题