1

私の質問を見ていただきありがとうございます。ページ全体に水平方向に拡大する div があります。これが必要です。div に 4 つのボタンがあり、以下を使用しています。

<div layout="row" layout-align="space-around center" layout-sm="column" layout-fill layout-wrap >

どっちがいい。ただし、div全体を占めているため、ボタンの間隔がぎこちなく見えます。それで私は追加しましたflex="33"、そして今それらは間隔を空けていますが、私が望むものであるページの3分の1だけを使用して立ち往生しており、見栄えがします. 私が抱えている問題は、ページの最初の 3 分の 1 を占めていて、ページの 2 分の 3 を使い切ってほしいということです。最初の 3 分の 1 を占めるために不要な div を作成せずにこれを行う方法はありますか?

完全なコードは次のとおりです。

<div flex="33" layout="row" layout-align="space-around center" layout-sm="column" layout-fill layout-wrap class="pageNavButtons">
    <div ng-repeat="button in navPage" layout="column" layout-align="center center" style="color: #ffffff">
        <label>{{button.div}}</label>
        <span></span>
        <md-icon md-svg-src="{{button.icon}}"></md-icon>
    </div>
</div>

私はまだCSSを持っていません。

画像:

前flex=33 ここに画像の説明を入力

それを追加した後： ここに画像の説明を入力

4

1 に答える 1

2

親を使用するflex-offset="33"か追加することで、それを実現できます。layout-align="center" layout="row"私はおそらく2番目のものを使用するでしょう。

<div div layout="row" flex-offset="33">
    <div flex="33" layout="row" layout-align="space-around center" layout-sm="column" layout-fill layout-wrap class="pageNavButtons">
        <div ng-repeat="button in navPage" layout="column" layout-align="center center" style="color: #ffffff">
            <label> {{button.div}}</label>
            <span>----- </span>
            <md-icon md-svg-src ={{button.icon}}></md-icon>
        </div>
    </div>
</div>

また

<div layout="row" layout-align="center">
    <div flex="33" layout="row" layout-align="space-around center" layout-sm="column" layout-fill layout-wrap class="pageNavButtons">
        <div ng-repeat="button in navPage" layout="column" layout-align="center center" style="color: #ffffff">
            <label> {{button.div}}</label>
            <span>----- </span>
            <md-icon md-svg-src ={{button.icon}}></md-icon>
        </div>
    </div>
</div>

http://codepen.io/kuhnroyal/pen/mPVdRK

于 2016-03-06T15:48:43.820 に答える