首页 \ 问答 \ 垂直对齐输入和按钮,无需自举(Vertical align input and button without bootstrap)

垂直对齐输入和按钮,无需自举(Vertical align input and button without bootstrap)

我想知道在没有 Bootstrap的情况下垂直对齐输入字段和按钮的最佳方法是什么。

这是它看起来如何正确知道:

在此处输入图像描述

一些代码:

<!doctype html>
        <title>Postnummer</title>
      <div class="container-fluid">
          <div class="divider"></div>
          <div class="row">
              <div class="col-md-12">
                  <form class="navbar-form">
                    <div class="input-group">
                      <input style="height:50px; color: black; border-radius: 0px;" type="number"  id="searchZipCode"class="form-control" placeholder="Sök postnummer">
                      <div class="input-group-btn">
                      <a id="submitBtn">
                        <button style="height:50px; border-radius: 0px" type="button" click="submitZipCode()" class="btn btn-default"><i class="fa fa-search fa-2x"></i></button>
                      </a>
                      </div>
                    </div>
                  </form>
              </div>
          </div>
    </div>

小提琴: https //jsfiddle.net/5mxzu4m5/

我想要输入字段右侧的图标。 真的很感谢所有的答案! :)


I wonder what's the best way to vertically align an input field and a button without Bootstrap.

Here's how it looks right know:

enter image description here

Some code:

<!doctype html>
        <title>Postnummer</title>
      <div class="container-fluid">
          <div class="divider"></div>
          <div class="row">
              <div class="col-md-12">
                  <form class="navbar-form">
                    <div class="input-group">
                      <input style="height:50px; color: black; border-radius: 0px;" type="number"  id="searchZipCode"class="form-control" placeholder="Sök postnummer">
                      <div class="input-group-btn">
                      <a id="submitBtn">
                        <button style="height:50px; border-radius: 0px" type="button" click="submitZipCode()" class="btn btn-default"><i class="fa fa-search fa-2x"></i></button>
                      </a>
                      </div>
                    </div>
                  </form>
              </div>
          </div>
    </div>

Fiddle: https://jsfiddle.net/5mxzu4m5/

I want the the icon on the right side of the input field. Really grateful for all the answers! :)


原文:https://stackoverflow.com/questions/44908986
更新时间:2023-01-19 07:01

最满意答案

有几种方法,但所有这些方法都取决于您不使用Enums或不使用它们。 请记住,枚举基本上是一个只有明确定义的单例作为值的类。

一种可能的重构是使用具有明确定义的单例而不是枚举的普通类:

class Status implements Serializable {
  // for serialization
  private enum InternalStatus {
    OK, TIMEOUT, EXCEPTION
  }
  public static final Status OK = new Status(null, InternalStatus.OK);
  public static final Status TIMEOUT = new Status(null, InternalStatus.TIMEOUT);

  private final Exception exception;
  private final InternalStatus internalStatus;

  private Status(Exception exception, InternalStatus internalStatus) {
    this.exception = exception;
    this.internalStatus = internalStatus;
  }

  public Exception getException() {
    return exception;
  }

  public static Status exceptionStatus(Exception cause) {
    if (cause == null) throw new NullPointerException();
    return new Status(cause, InternalStatus.EXCEPTION);
  }

  // deserialization logic handling OK and TIMEOUT being singletons
  private final Object readResolve() {
    switch (internalStatus) {
    case InternalStatus.OK:
      return OK;
    case InternalStatus.TIMEOUT:
      return TIMEOUT;
    default:
      return this;
    }
  }      
}

您现在可以检查status == Status.OKstatus == Status.TIMEOUT 。 如果您的状态变量既不是OK也不是TIMEOUT,它必须由异常引起,您可以通过getException检索该异常。

作为缺点,您将失去switch功能,必须通过if检查。


There are several approaches to this, but all of them depend that you don't use Enums or that you don't use them exclusively. Keep in mind that an enum is basically a class that only has well-defined singletons as value.

One possible refactoring of this is to use a normal class with well-defined singletons instead of enums:

class Status implements Serializable {
  // for serialization
  private enum InternalStatus {
    OK, TIMEOUT, EXCEPTION
  }
  public static final Status OK = new Status(null, InternalStatus.OK);
  public static final Status TIMEOUT = new Status(null, InternalStatus.TIMEOUT);

  private final Exception exception;
  private final InternalStatus internalStatus;

  private Status(Exception exception, InternalStatus internalStatus) {
    this.exception = exception;
    this.internalStatus = internalStatus;
  }

  public Exception getException() {
    return exception;
  }

  public static Status exceptionStatus(Exception cause) {
    if (cause == null) throw new NullPointerException();
    return new Status(cause, InternalStatus.EXCEPTION);
  }

  // deserialization logic handling OK and TIMEOUT being singletons
  private final Object readResolve() {
    switch (internalStatus) {
    case InternalStatus.OK:
      return OK;
    case InternalStatus.TIMEOUT:
      return TIMEOUT;
    default:
      return this;
    }
  }      
}

You can now check for status == Status.OK and status == Status.TIMEOUT. If your status variable is neither OK nor TIMEOUT, it must be caused by an exception, which you can retrieve via getException.

As a downside, you lose the switch functionality and must check via if.

相关问答

更多
  • 一个定义方法的枚举实例,就像你的ID在这里所做的那样,是一个enum类的隐式匿名子类的单例。 正常访问规则适用于子类和枚举类之间,因此需要综合访问器来查看枚举类的私有特征。 Java语言规范要求枚举以这种方式工作 : 一个枚举常量的可选类体隐式定义了一个匿名类声明(第15.9.5节),它扩展了直接封装的枚举类型。 班级机构由匿名班级的常规规则管理...... 这当然是他们如何实际执行。 在JDK的javac中,这发生在3344行(在这个版本中)的JavacParser::enumeratorDeclarat ...
  • 你应该做gamer1->token = RED; token是结构的成员而不是Cell 。 You should do gamer1->token = RED; token is the member of the struct and not Cell.
  • 不是没有基本使它不再是一个enum 。 枚举是类 。 第一次使用类时,它将被JVM加载并完成其所有静态初始化。 设置枚举成员是一个静态初始化,所以它们都将被初始化。 Not without basically making it not an enum anymore. Enums are classes. The first time a class is used, it gets loaded by the JVM and all of its static initialization is don ...
  • 我不认为它可以使用enum来完成,但我们可以将class implement为enum 。 你可以做下面的事情。 实现: public class Card { private int suit; private int face; private Card(int suit, int face){ this.suit = suit; this.face = face; } public int getSuit(){ ...
  • 有几种方法,但所有这些方法都取决于您不使用Enums或不使用它们。 请记住,枚举基本上是一个只有明确定义的单例作为值的类。 一种可能的重构是使用具有明确定义的单例而不是枚举的普通类: class Status implements Serializable { // for serialization private enum InternalStatus { OK, TIMEOUT, EXCEPTION } public static final Status OK = new S ...
  • 您的实例没有不同的类型,它们是不同的类型。 第1步:完全删除你的枚举。 第2步:创建一个抽象类: public abstract class Item { public abstract String decode(byte[] data); // other common stuff } 步骤:为每种类型创建子类,以提供解码方法的实现: public class ItemType1 extends Item { public String decode(byte[] data) ...
  • Java枚举实际上只是由编译器和运行时进行一些特殊处理的类。 所以是的,对枚举实例的方法调用肯定会改变它的状态。 我不确定你的意思是“那么Enum类型的不变量,即导出一些常量的某种类型会破坏”。 谁说枚举只能是一堆常数? 枚举类型的本质是您有一个预定义的固定数量的实例,您可以通过名称来引用它们 - 而Java枚举实现它。 但为什么一种语言不允许使用比这更强大的枚举? 如果你不想要额外的力量,没有人强迫你使用它。 你可以拥有没有字段或方法的Java枚举,它们的行为与C枚举完全相同。 Java enums ar ...
  • 首先,请原谅我,如果我不熟悉问题域; 我的例子可能反映了这一点 我认为你的直觉很好,因为枚举解决方案似乎违反了开放/封闭原则 。 在添加新的蛋白质属性和类型时,无需触摸多个位置即可解决此问题的另一种方法是使ProteinType和ProteinProperty抽象基类接受结构并对其进行操作。 然后,Protein可以聚合两种类型,接受Structure并将Structure委托给ProteinType和ProteinProperty实例,以便可以通过大多数派生类型修改Structure。 可以自动化的另一件 ...
  • 我要检查的第一件事是以下输出: Console.WriteLine(ObjectFactory.WhatDoIHave()); 确保您的事件处理程序按预期进行注册。 如果类按照您的意愿注册,那么我认为这就是您要解决IDomainEventHandler的方法: foreach (var handler in ObjectFactory.ForObject(eventToDispatch) .GetAllClosedTypesOf(t ...
  • 您需要先为结构分配内存,然后才能使用它们。 您可以使用“自动存储”: // You can't change COUNT while the program is running. // COUNT should not be very large (depends on platform). #define COUNT 10 int main() { // Allocate memory. struct test zero[COUNT]; assign(zero, 1, 3, ...

相关文章

更多

最新问答

更多
  • h2元素推动其他h2和div。(h2 element pushing other h2 and div down. two divs, two headers, and they're wrapped within a parent div)
  • 创建一个功能(Create a function)
  • 我投了份简历,是电脑编程方面的学徒,面试时说要培训三个月,前面
  • PDO语句不显示获取的结果(PDOstatement not displaying fetched results)
  • Qt冻结循环的原因?(Qt freezing cause of the loop?)
  • TableView重复youtube-api结果(TableView Repeating youtube-api result)
  • 如何使用自由职业者帐户登录我的php网站?(How can I login into my php website using freelancer account? [closed])
  • SQL Server 2014版本支持的最大数据库数(Maximum number of databases supported by SQL Server 2014 editions)
  • 我如何获得DynamicJasper 3.1.2(或更高版本)的Maven仓库?(How do I get the maven repository for DynamicJasper 3.1.2 (or higher)?)
  • 以编程方式创建UITableView(Creating a UITableView Programmatically)
  • 如何打破按钮上的生命周期循环(How to break do-while loop on button)
  • C#使用EF访问MVC上的部分类的自定义属性(C# access custom attributes of a partial class on MVC with EF)
  • 如何获得facebook app的publish_stream权限?(How to get publish_stream permissions for facebook app?)
  • 如何防止调用冗余函数的postgres视图(how to prevent postgres views calling redundant functions)
  • Sql Server在欧洲获取当前日期时间(Sql Server get current date time in Europe)
  • 设置kotlin扩展名(Setting a kotlin extension)
  • 如何并排放置两个元件?(How to position two elements side by side?)
  • 如何在vim中启用python3?(How to enable python3 in vim?)
  • 在MySQL和/或多列中使用多个表用于Rails应用程序(Using multiple tables in MySQL and/or multiple columns for a Rails application)
  • 如何隐藏谷歌地图上的登录按钮?(How to hide the Sign in button from Google maps?)
  • Mysql左连接旋转90°表(Mysql Left join rotate 90° table)
  • dedecms如何安装?
  • 在哪儿学计算机最好?
  • 学php哪个的书 最好,本人菜鸟
  • 触摸时不要突出显示表格视图行(Do not highlight table view row when touched)
  • 如何覆盖错误堆栈getter(How to override Error stack getter)
  • 带有ImageMagick和许多图像的GIF动画(GIF animation with ImageMagick and many images)
  • USSD INTERFACE - > java web应用程序通信(USSD INTERFACE -> java web app communication)
  • 电脑高中毕业学习去哪里培训
  • 正则表达式验证SMTP响应(Regex to validate SMTP Responses)