选中复选框，选择并输入内嵌

时间：2016-10-14 08:16:49

标签： html css html5 twitter-bootstrap css3

我正在尝试创建一个搜索栏，其中绿色div位于灰色的中间（请参阅http://codepen.io/anon/pen/LRBEvq?editors=1100），并选中复选框，选择下拉菜单，输入字段全部内联两个按钮 - 所以一切都在同一行。我正在使用Bootstrap使其响应，但卡住了，无法弄明白..谢谢你们所有的帮助！

这是我的html：

.main {
  background-color: grey;
  width: 1202px;
  height: 156px;
  margin: 0 auto;
}
.formContainer {
  width: 1140px;
  height: 85px;
  background-color: green;
}
button {
  height: 37px;
  width: 160px;
}
.choice {
  background-color: lightgrey;
  height: 37px;
}
.checkbox {
  width: 207px;
  border: 1px solid white;
}
.choice-select {
  width: 173px;
}
.choice-input {
  width: 390px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
  <div class="container">
    <div class="main">
      <div class="formContainer">
        <div class="col-md-12">Lorem lorem lorem
          <div class="pull-right">Ipsum lorem ipsum</div>
        </div>
        <div class="row mainContent">
          <!-- mainContent -->
          <div class="col-md-7">
            <!-- main content -->

            <div class="checkbox">
              <span class="choice-details">
                 <label class="checkbox-inline">
                   <input type="checkbox" value="" checked>Lorem
                 </label>
                 <label class="checkbox-inline">
                   <input type="checkbox" value="">Ipsum
                 </label>
               </span>
            </div>
            <div class="choice-select">
              <select class="form-control">
                <option value="one">One</option>
                <option value="two">Two</option>
                <option value="three">Three</option>
                <option value="four">Four</option>
                <option value="five">Five</option>
              </select>
            </div>
            <div class="choice-input">
              <input type="text" placeholder="Placeholder text">
            </div>

          </div>
          <div class="col-md-5">
            <button>Lorem ipsum lorem</button>
            <button>Lorem lorem lorem</button>
          </div>
          <!-- end main content -->
        </div>
        <!-- end mainContent -->
      </div>
    </div>
  </div>

5 个答案:

答案 0 :(得分：3)

横向居中：

对于水平居中，我们希望左右边距相等。这样做的方法是将边距设置为＆＃39; auto＆＃39;。这通常与固定宽度的块一起使用，因为如果块本身是灵活的，它将占用所有可用的宽度。

垂直居中：

基本规则是：

  1. 使容器相对定位，将其声明为绝对定位元素的容器。

  2. 使元素本身绝对定位。

  3. 将它放在容器的一半，顶部为：50％＆＃39;。 （请注意，50％＆＃39;这里表示容器高度的50％。）

  4. 使用翻译将元素向上移动一半高度。 （＆＃39; 50％＆＃39;翻译（0，-50％）＆＃39;指的是元素本身的高度。）

    5. 所以你的代码看起来像这样

    .main {
  background-color: grey;
  width: 1202px;
  height: 156px;
  position: relative;
}

.formContainer {
  width: 1140px;
  height: 85px;
  background-color: green;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

    我希望你解决了所有其他问题。

答案 1 :(得分：2)

使用display: inline-block;使包装div的行为类似于内联元素而不会丢失其块属性：

.mainContent .checkbox,
.mainContent .choice-select,
.mainContent .choice-input {
  display: inline-block;
}

如果您还希望按钮位于同一行，请对整个内容使用<div class="col-md-12">。

要水平居中菜单栏，请使用margin: 0 auto;;要将它垂直居中position它，将top: 50%;和translate应用于负y方向的一半大小（向上）：

.formContainer {
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translate(0,-50%);
}

要使输入文本字段与剩余空间一样长，只需将输入的宽度设置为与其包装div相同：

.mainContent .choice-input input {
    width: inherit;
}


.main {
  background-color: grey;
  width: 1202px;
  height: 156px;
  margin: 0 auto;
}
.formContainer {
  width: 1140px;
  height: 85px;
  background-color: green;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
}
button {
  height: 37px;
  width: 160px;
}
.choice {
  background-color: lightgrey;
  height: 37px;
}
.checkbox {
  width: 207px;
  border: 1px solid white;
}
.choice-select {
  width: 173px;
}
.choice-input {
  width: 390px;
}
.mainContent .checkbox,
.mainContent .choice-select,
.mainContent .choice-input {
  display: inline-block;
}
.mainContent .choice-input input {
  width: inherit;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
  <div class="container">
    <div class="main">
      <div class="formContainer">
        <div class="col-md-12">Lorem lorem lorem
          <div class="pull-right">Ipsum lorem ipsum</div>
        </div>
        <div class="row mainContent">
          <!-- mainContent -->
          <div class="col-md-12">
            <!-- main content -->

            <div class="checkbox">
              <span class="choice-details">
                <label class="checkbox-inline">
                  <input type="checkbox" value="" checked>Lorem
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" value="">Ipsum
                </label>
              </span>
            </div>
            <div class="choice-select">
              <select class="form-control">
                <option value="one">One</option>
                <option value="two">Two</option>
                <option value="three">Three</option>
                <option value="four">Four</option>
                <option value="five">Five</option>
              </select>
            </div>
            <div class="choice-input">
              <input type="text" placeholder="Placeholder text">
            </div>

            <button>Lorem ipsum lorem</button>
            <button>Lorem lorem lorem</button>
          </div>
          <!-- end main content -->
        </div>
        <!-- end mainContent -->
      </div>
    </div>
  </div>

答案 2 :(得分：1)

尝试修改这些规则：

.checkbox, .radio {
    position: relative;
    display: inline-block; // changed from block to inline-block. Block will take 100% width. To keep elements inline you must use inline-block
    margin-top: 10px;
    margin-bottom: 10px;
}

.choice-select {
    width: 173px;
    display: inline-block; // added inline-block
}

.choice-input {
    width: 176px; // reduced width.
    display: inline-block; // added inline-block
}

答案 3 :(得分：1)

检查下面的代码，我已将html控件放在带引导网格类的单独div中，以使它们内联并在margin: 0 auto类中添加.formContainer 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
  <div class="container">
    <div class="main">
      <div class="formContainer">
        <div class="col-md-12">Lorem lorem lorem
          <div class="pull-right">Ipsum lorem ipsum</div>
        </div>
        <div class="row mainContent">
          <!-- mainContent -->
          <div class="col-md-7">
            <!-- main content -->
            <div class="col-md-4">
            <div class="checkbox">
              <span class="choice-details">
                <label class="checkbox-inline">
                  <input type="checkbox" value="" checked>Lorem
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" value="">Ipsum
                </label>
              </span>
            </div>
             </div>

            <div class="col-md-4">
            <div class="choice-select">
              <select class="form-control">
                <option value="one">One</option>
                <option value="two">Two</option>
                <option value="three">Three</option>
                <option value="four">Four</option>
                <option value="five">Five</option>
              </select>
            </div>
            </div>

            <div class="col-md-4">
            <div class="choice-input">
              <input type="text" placeholder="Placeholder text">
            </div>
            </div>

          </div>
          <div class="col-md-5">
            <button>Lorem ipsum lorem</button>
            <button>Lorem lorem lorem</button>
          </div>
          <!-- end main content -->
        </div>
        <!-- end mainContent -->
      </div>
    </div>
  </div>




.main {
    background-color: grey;
    width: 1202px;
    height: 156px;
    margin: 0 auto;
}

.formContainer {
    width: 1140px;
    height: 85px;
    background-color: green;
  margin: 0 auto;

}

button {
    height: 37px;
    width: 160px;
}

.choice {
    background-color: lightgrey;
    height: 37px;
}

.checkbox {
    width: 207px;
    border: 1px solid white;
}

.choice-select {
    width: 173px;
}

.choice-input {
    width: 390px;
}

答案 4 :(得分：1)

您应该只使用引导程序标记来执行您想要的操作。我把你的笔分叉并稍微修改了一下：

http://codepen.io/ugreen/pen/XjBpqX 

public void OnChanged(object sender, FileSystemEventArgs e)
{
    string FileName = System.IO.Path.GetFileName(e.FullPath);

    if(IsAvailable(System.IO.Path.Combine(RecievedPath,FileName)))
    {
        ProcessMessage(FileName);
    }
}


private void ProcessMessage(string fileName)
{
    try
    {
       File.Copy(System.IO.Path.Combine(RecievedPath,fileName), System.IO.Path.Combine(SentPath,fileName));
        MessageBox.Show("File Copied");
    }
    catch (Exception)
    { }
}

private static bool IsAvailable(String filePath)
{
    try
    {
        using (FileStream inputStream = File.Open(filePath, FileMode.Open, FileAccess.Read, FileShare.None))
        {
            if (inputStream.Length > 0)
            {
                return true;
            }
            else
            {
                return false;
            }

        }
    }
    catch (Exception)
    {
        return false;
    }
}

但是在关于navbars的bootstrap文档中做一些事情可能会更好： http://getbootstrap.com/components/#navbar

相关问题
最新问题