小编SSS*_*SSS的帖子

在文本框中放置一个按钮

我正在尝试设计一个表单,在文本框中有一个按钮.我希望该按钮位于文本框内.这是我尝试的方式:

<div class="row">
    <div class="col-sm-6">
        <div class="form-group required">
            <label for="PickList_Options" class="col-sm-4 control-label">Options</label>
            <div class="col-sm-4 buttonwrapper">
                <input type="text" class="form-control" id="PickList_Options" name="PickList_Options" value='' />
                <button>GO</button>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="result" id="mydiv"></div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

我的css:

.buttonwrapper {
    display:inline-block;
}

input,
button {
    background-color:transparent;
    border:0;
}
Run Code Online (Sandbox Code Playgroud)

但是,问题是,Go按钮位于文本框下方.我该怎么做才能把它放在文本框中?在此输入图像描述

我希望"Go"按钮位于文本框内.

html css

9
推荐指数
2
解决办法
2万
查看次数

结合两个Font Awesome图标

我正在尝试组合两个Font Awesome图标,以创建一个堆栈.我正在尝试合并fa-calendarfa-clock-o图标.这是因为,我需要一个日期时间的图标.

所以,为了结合它们,我尝试了这个:

HTML

<span class="icon-stack">
   <i class="fa fa-calendar icon-stack-3x"></i>
   <i class="fa fa-clock-o icon-stack-1x"></i>
</span>
Run Code Online (Sandbox Code Playgroud)

CSS

.icon-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 5em;
  line-height: 4em;
  vertical-align: middle;
}
.icon-stack-1x,
.icon-stack-2x,
.icon-stack-3x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.icon-stack-1x {
  line-height: inherit;
}
.icon-stack-2x {
  font-size: 1.5em;
}
.icon-stack-3x {
  font-size: 2em;
}
Run Code Online (Sandbox Code Playgroud)

这就是我得到的结果.

在此输入图像描述

但是,我想带一点点正确.我不知道怎么做?我能做些什么才能让它走向正确?

css fonts stacked font-awesome

7
推荐指数
1
解决办法
2万
查看次数

在同一行jquery dataTables中显示页面长度和分页

有没有办法在同一行显示页面长度选项和分页选项?这就是我得到的:

在此输入图像描述

有没有办法覆盖他们的CSS并在同一行显示它们?它们都在两个独立的div中.我添加了"jquery.dataTables.min.css"和"bootstrap.min.css".

css datatables twitter-bootstrap

5
推荐指数
2
解决办法
7077
查看次数

将两个<li>放在一行html中

我正在创建一个表单,我有一个侧面导航栏.我有大约15-20个元素要显示.我想要<li>二合一.每个都<li>包含一个模态的链接.当<li>被点击时,一个模式打开.

这就是我写的:

<div id="sidebar-wrapper">
      <ul class="sidebar-nav">
         <h4 class="sidebar-brand">Select Field Type</h4>
         <li><a href="#" data-toggle="modal" data-target="#SingleLine_Modal">Single Line</a></li>
         <li><a href="#" data-toggle="modal" data-target="#PickList_Modal">Pick List</a></li>
         <li><a href="#" data-toggle="modal" data-target="#MultiSelect_Modal">Multi Select</a></li>
         <li><a href="#" data-toggle="modal" data-target="#MultiLine_Modal">Multi Line</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Email_Modal">Email</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Phone_Modal">Phone Number</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Mobile_Modal">Mobile Number</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Date_Modal">Date</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Time_Modal">Time</a></li>
         <li><a href="#" data-toggle="modal" data-target="#DateTime_Modal">Date-Time</a></li>
         <li><a href="#" data-toggle="modal" data-target="#CheckBox_Modal">Checkbox</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Radio_Modal">Radio</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Decimal_Modal">Decimal</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Number_Modal">Number</a></li>
         <li><a href="#" …
Run Code Online (Sandbox Code Playgroud)

html css

3
推荐指数
1
解决办法
3331
查看次数

多选onchange事件jquery

我正在创建一个表格。我有两个字段,1.默认值字段和2.预览字段。两者都是多选字段。用户将手动将选项添加到多选中。每当用户选择默认值中的选项时,预览字段中应显示相同的值。当用户删除一个选项时,应取消选择同一选项。这就是我为此多选编写 onchange 事件的方式:

$("#MultiSelect_DefaultValues").change(function() {
          alert($(this).val());
          $("#MultiSelect_Preview").val($(this).val());
        });
Run Code Online (Sandbox Code Playgroud)

我在警报中得到了正确的值。但是,预览场中却没有任何反应。默认值字段中可用的所有选项也可在预览字段中使用。但是,在默认值字段中选择的选项不会在预览字段中选择。这有什么问题吗?我应该更改什么,以便默认字段中的更改也反映在预览字段中?

javascript jquery

2
推荐指数
1
解决办法
3万
查看次数

在提示警报ionic-2中选择时间

我是离子-2的新手.我正在开发一个应用程序,用户必须在其中创建警报.为此,我创建了一个页面.该页面包含一个"+"按钮.单击该按钮时,将显示提示警报.截至目前,该提示警报有一个文本框和确定按钮.但是,而不是我需要显示日期时间选择器.我怎样才能做到这一点?任何帮助?

my html file:
<ion-header>
    <ion-navbar color="primary">
        <ion-title>Alarm</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-fab right bottom>
        <button ion-fab (click)="alarm()" color="vibrant" mini>
            <ion-icon name="add"></ion-icon>
        </button>
    </ion-fab>
</ion-content>

my ts file:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { AlertController } from 'ionic-angular';

@Component({
  selector: 'page-wifi-controller-schedules',
  templateUrl: 'wifi-controller-schedules.html'
})
export class AlarmsPage {

  constructor(public navCtrl: NavController, public alertCtrl: AlertController) {}



  alarm() {
    let prompt = this.alertCtrl.create({
      title: 'Login',
      message: "Enter a name for this new album you're …
Run Code Online (Sandbox Code Playgroud)

ionic2 angular

1
推荐指数
1
解决办法
6948
查看次数