ドロップダウンリストの幅を親と同じにします

ボタンとドロップダウンリストを並べて入れたいので、display: inline-blockを使用する必要があります。次に、ドロップダウンリストの幅を親（つまり、Version）と同じにすることは難しいことに気付きました。 position: relativeとwidth:100%のようなメソッドは機能しません。ドロップダウンリストの幅を親と同じにします

誰でもそれを行う方法を知っていますか？ブートストラップで

JSBin

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://code.jquery.com/jquery.min.js"></script> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
    <style> 
    dropdown { 
     position: relative 
    } 
    dropdown-menu { 
     width: 100% 
    } 
    </style> 
</head> 
<body ng-app="app" ng-controller="Ctrl"> 
    <button type="submit" class="btn btn-primary" style="border-top-right-radius: 0px;border-bottom-right-radius: 0px;"> 
    Save</button><div class="dropdown" style="display:inline-block"> 
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" style="border-top-left-radius: 0px; border-bottom-left-radius: 0px">Version 
    <span class="caret"></span></button> 
    <ul class="dropdown-menu"> 
     <li ng-repeat = "x in versions"> 
     <a href="#">{{x}}</a> 
     </li> 
    </ul> 
    </div> 
    <script> 
    var app = angular.module('app', []); 
    app.controller('Ctrl', ['$scope', function ($scope) { 
     $scope.versions = [1, 2, 3, 4, 5]; 
    }]) 
    </script> 
</body> 
</html>

出典

2017-03-23 SoftTimur

。ドロップダウンをボタン（ 'Version'）と同じ幅にする方法や、メニューアイテムをボタンによって水平に表示させる方法（" side by side "）を尋ねていますか？ – justinw

ドロップダウンを 'Version'ボタンと同じ幅にします。私が使用しなければならない 'display：inline-block'が問題を複雑にするのではないかと、私は質問で' Save'と言います... – SoftTimur

、.dropdown-menuはmin-width値を有します。これをオーバーライド：私はあなたの質問で混乱しています

.dropdown-menu { 
    min-width: 0; 
    width: 100%; 
}

demo

出典

2017-03-23 04:01:16 justinw

ドロップダウンリストの幅を親と同じにします

答えて

関連する問題