Question

这是我面临的问题的一个例子：
https://jsfiddle.net/v10un11s/1/

这是我的HTML：

<div>
  <div class="component">
    <div>
      <label for="test1" id="short-label">Short label: </label>
    </div>
    <div>
      <input type="text" id="test1" />
    </div>
  </div>
  <div class="component">
    <div>
      <label for="test2" id="long-label">This is my very very very very very very very very very very very very very very very very very very long label: </label>
    </div>
    <div>
      <input type="text" id="test2" />
    </div>
  </div>
</div>

我的css：

component > div:first-child {
  width: 150px;
  text-align: right;
  margin-right: 5px;
  margin-bottom: 10px;
}

.component > div {
  display: inline-block;
}

这会导致输入字段排列在标签的右侧。这就是我想要的，然而，它排在一个很长的标签行的末尾。

我真正想要的是右侧的输入字段行和标签的相对中间位置。

所以在上面的JS Fiddle示例中，我希望输入字段排成长标签第三行的右侧。

我一直在玩边缘，填充物，线高等等，而且我还没能找到正确的解决方案。

Answer 1

您可以使用public function blogstore(Request $request){ $this->validate($request, [ 'title' => 'required|max:255|unique:blogs', 'summary' => 'required', 'description' => 'required', 'image' => 'image', 'agree' => 'required', ]); $blog = new blog; $blog->title = $request->title; $blog->summary = $request->summary; $blog->content = $request->description; $blog->user_id = Auth::user()->id; $blog->slug = EasySlug::generateSlug($blog->title, $separator = '-'); $blog->tag('Apple,Banana,Cherry'); $blog->tag->taggable_id = 1; if($request->hasFile('image')) { $file = Input::file('image'); //getting timestamp $timestamp = str_replace([' ', ':'], '-', Carbon::now()->toDateTimeString()); $name = $timestamp. '-' .$file->getClientOriginalName(); $blog->image = $name; $file->move(public_path().'/../public_html/img/blog/', $name); $thumb = Image::make(public_path().'/../public_html/img/blog/' . $name)->resize(1366,786)->save(public_path().'/../public_html/img/blog/thumb/' . $name, 90); } $blog->save(); return redirect()->route('admin.blog.index')->with('status', 'Blog Posted Successfully'); }并在Flexbox

上设置align-items: center

.component

.component {
  display: flex;
  align-items: center;
}
.component > div:first-child {
  width: 150px;
  text-align: right;
}

Answer 2

只需要一行CSS就行了！

.component > div {
  display: inline-block;
  vertical-align: middle;
}

请记住，这两种方式都有效 - 所以如果您的输入高于标签，标签将以输入为中心。

如何在标签中间旁边输入输入字段？

2 个答案: