我是前端开发的新手,现在我试图将表格并排放置在以下表格中,而不是在单独的行中显示。这是我的代码:
$templateCache.put('myProfile.html',
'<div ng-cloak>'+
'<div class="modal-header">'+
'<h3 class="modal-title">My Profile</h3>'+
'</div>'+
'<div class="modal-body">'+
'<div class="form-group">'+
'<label>Title</label>'+
'<input type="text" id="first_name" name="first_name" class="form-control" required/>'+
'</div>'+
'<div class="form-group">'+
'<label>First Name</label>'+
'<input type="text" id="first_name" name="first_name" class="form-control" required/>'+
'</div>'+
'<div class="form-group">'+
'<label>Last Name</label>'+
'<input type="text" id="last_name" name="last_anme" class="form-control" required/>'+
'</div>'+
'<div class="form-group">'+
'<label>Test</label>'+
'<input type="text" id="address" name="address" class="form-control" required/>'+
'</div>'+
'<div class="form-group">'+
'<label>Other</label>'+
'<input type="text" id="other" name="other" class="form-control" required/>'+
'</div>'+
'<div class="form-group">'+
'<label>Date Format</label>'+
'<select class="form-control-filter" ng-init="tempDateFormat = dateFormat"'+
' ng-model=\"tempDateFormat\" style="width:100%;">'+
'<option value="DD/MM/YYYY">DD/MM/YYYY</option>'+
'<option value="MM/DD/YYYY">MM/DD/YYYY</option>'+
'<option value="DD-MM-YYYY">DD-MM-YYYY</option>'+
'<option value="MM-DD-YYYY">MM-DD-YYYY</option>'+
'</select>'+
'</div>'+
'<div class="modal-footer" style="padding:5px;">'+
'<button class="btn btn-primary" type="button" style="height:30px; padding:4px 12px;" '+
'ng-click="$close(tempDateFormat)">Save</button>'+
'<button class="btn btn-primary" type="button" style="height:30px; padding:4px 12px;" '+
'ng-click="$close(tempDateFormat)">Cancel</button>'+
'</div>'+
'</div>'
);
输出如下所示:
但是,我希望扩展此窗口,并排显示表单 first name
和 last name
。我在这个网站上做了一些研究,但似乎对我的情况不起作用。
提前致谢。
最佳答案
将名字和姓氏html放在同一个表单组中,并赋予其类form-inline。像这样:
<div class="form-group form-inline">
<label>First Name</label>
<input type="text" id="first_name" name="first_name" class="form-control" required/>
<label>Last Name</label>
<input type="text" id="last_name" name="last_name" class="form-control" required/>
</div>
如果你想让它们在移动宽度上并排放置,你将不得不覆盖一些 css,只需添加:
.form-inline .form-control{
display: inline-block;
width: auto;
vertical-align: middle;
}
如果你在移动宽度上这样做,你可能需要做一些自定义 css 来使它们看起来正确,因为我认为它们在小屏幕上并排看起来有点傻
关于html - 并排放置表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39137002/