我希望第一行有3个图像按钮,第二行有3个图像按钮。 我尝试使用相对和线性布局的组合实现它,但不知何故,我最终在每行中有1个图像按钮,总共6行。
有人可以帮我对齐第一行的3个图像框和第二行的3个图像框。
<div ng-controller="testController" ng-init="init()">
<div class="container" ng-show="createMenu">
<br />
<div class="row">
<div class="col-sm-2">
<label class="control-label">test:</label>
</div>
<div class="col-sm-4 form-group">
<select name="testTypeSelect" ng-model="selectedtestType" ng-options="test.testTypeName for test in tests" ng-change="updateImageUrl(selectedtestType)">
<option value="">-- Select the test --</option>
</select>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-2">
<label>Name :</label>
</div>
<div class="col-md-6 form-group">
<input type="text" maxlength="150" ng-model="testName" name="testName" />
</div>
</div>
<br />
<div class="row">
<div class="form-group ">
<label class="form-group col-md-3">Language</label>
<label class="form-group col-md-4">Title</label>
<label class="form-group col-md-5"> Description</label>
</div>
</div>
<div class="row">
<div>
<div ng-repeat="Descriptions in testsWithDescription ">
<div class="form-group col-md-2 top-Margin-language">
<label ng-model="Descriptions.Language">{{Descriptions.Language}}</label>
</div>
<div class="form-group col-md-4 top-Margin-Title">
<input type="text" maxlength="150" input-md" name="titleValidate[]" ng-model="Descriptions.Title" />
</div>
<div class="form-group col-md-5">
<textarea maxlength="500" class="form-control input-md noresize" name="descriptionValidate[]" noresize ng-model="Descriptions.Description"></textarea>
</div>
<div class="form-group col-md-1">
<a style="cursor:pointer"><img ng-src="{{DeleteIcon_url}}" alt="delete image" ng-click="($index == !selectedDeleteIcon) || testsWithDescription.splice($index,1)" ng-class="{'disabled': $first}" /> </a>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 ">
<label>Delivery Method</label>
</div>
<div class="col-lg-2 col-md-2 col-sm-2" ng-repeat="method in deliveryMethods">
<input type="checkbox" id="{{method.id}}"
value="{{method.value}}" name="deliveryMethod[]" ng-model="method.selected"
ng-click="toggleSelection(method.value)" ng- ="value.length==0"> {{method.value}}
</div>
</div>
<br />
<div class="form-group">
<div class="col-sm-offset-4 col-sm-6">
<input type="submit" value="Submit" ng-click="add()" />
<input type="button" id="btnReset" value="Cancel" ng-click="reset()" />
</div>
答案 0 :(得分:1)
试用此代码,
activity_main.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin">
<LinearLayout
android:id="@+id/lin1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<ImageButton
android:id="@+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="@drawable/star2" />
<ImageButton
android:id="@+id/image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="@drawable/star1" />
<ImageButton
android:id="@+id/image3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="@drawable/star3" />
</LinearLayout>
<LinearLayout
android:id="@+id/lin2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/lin1"
android:orientation="horizontal"
android:weightSum="3">
<ImageButton
android:id="@+id/image4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="@drawable/star2" />
<ImageButton
android:id="@+id/image5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="@drawable/star1" />
<ImageButton
android:id="@+id/image6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="@drawable/star3" />
</LinearLayout>
</RelativeLayout>
特此,我附上截图,
希望它会对你有所帮助。