Question

我注意到，如果我使用带有<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:output method="xml" indent="yes" /> <xsl:template match="transaction"> <xsl:copy> <xsl:for-each-group select="record" group-by="@type"> <records type="{current-grouping-key()}" > <xsl:apply-templates select="current-group()" /> </records> </xsl:for-each-group> </xsl:copy> </xsl:template> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template> </xsl:stylesheet>和select的flexbox，两者都采用表单控件样式，那么不会在左侧对齐（我已经放了那个粗体的文字，因为人们似乎不明白这个问题）。顶部输入的左侧未与选择的左侧对齐。如果我删除输入的填充，它们会对齐。

修改：此问题出现在Chrome和Safari上。 Firefox没问题。

Plunker

标记

input

CSS

<div class="all">
  <div class="container">
    <label class="label">Input default</label>
    <input class="input form-control">
  </div>
  <div class="container">
    <label class="label">Input no padding</label>
    <input class="input form-control no-padding">
  </div>
  <div class="container">
    <label class="label">Select</label>
    <select class="input form-control">
          <option>Hello</option>
          <option>World</option>
        </select>
  </div>
</div>

如何设置仅选择样式或使用flexbox以使其与输入对齐？

请不要编辑此问题，以便它运行代码段 ，除非 输出完全如图所示。

Answer 1

请试一试。

＆＃13;

.all {
  display: flex;
  flex-direction: column;
  padding: 20px;
}
.col-form-label { 
  background: yellow;
  text-align: right;   
}
.container { 
  width: 100%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="all">
  <div class="container">
    <div class="form-group row">
      <label class="col-xs-6 col-form-label">Input default</label>
      <div class="col-xs-6 p-l-0">
        <input class="input form-control">
      </div>
    </div>
    <div class="form-group row">
      <label class="col-xs-6 col-form-label">Input no padding </label>
      <div class="col-xs-6 p-l-0">
        <input class="input form-control">
      </div>
    </div>
  <div class="form-group row">
    <label class="col-xs-6 col-form-label">Select</label>
    <div class="col-xs-6 p-l-0">
      <select class="input form-control">
        <option>Hello</option>
        <option>World</option>
      </select>
    </div>
  </div>
</div>

＆＃13;

Answer 2

您无法向select元素添加填充，因为它是由用户代理生成的，因此您可以使用appearance: none;重置浏览器默认值并添加样式。不幸的是，并非所有浏览器都支持它：https://caniuse.com/#search=appearance

.all {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.container {
  display: flex;
  flex: 1;
  align-items: center;
}

.input {
  flex: 1
}

.label {
  flex: 1;
  background: yellow;
  text-align: right;
  padding-right: 10px;
  margin-bottom: 0;
}

.no-padding {
  padding: 0;
}

select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 6px 12px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="all">
  <div class="container">
    <label class="label">Input default</label>
    <input class="input form-control">
  </div>
  <div class="container">
    <label class="label">Input no padding</label>
    <input class="input form-control no-padding">
  </div>
  <div class="container">
    <label class="label">Select</label>
    <select class="input form-control">
          <option>Hello</option>
          <option>World</option>
        </select>
  </div>
</div>

Answer 3

解决方案是将各种元素放在flex包装器中。 This example shows the principle

Working Plunker

标记

<div class="all">
  <div class="container">
    <div class="wrapper">
      <label class="label">Input default</label>
    </div>
    <div class="wrapper">
      <input class="form-control">
    </div>
  </div>
  <div class="container">
    <div class="wrapper">
      <label class="label">Select</label>
    </div>
    <div class="wrapper">
      <select class="form-control">
        <option>Hello</option>
        <option>World</option>
      </select>
    </div>
  </div>
</div>

CSS

.all {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.container {
  display: flex;
  align-items: center;
}

.input {
  flex: 1
}

.label {
  flex: 1;
  background: yellow;
  text-align: right;
  padding-right: 10px;
  margin-bottom: 0;
}

.no-padding {
  padding: 0;
}

.wrapper {
  display: flex;
  flex: 1;
}

如何使用表单控件样式进行样式选择，使其在左侧与输入具有表单控件样式对齐？

3 个答案: