Question

我想要一个包装器，我需要在左边的img，中间的按钮，右边的文本，所有都在同一行。中心我试过

       {margin:0 auto;}

但它不起作用。同样使用单独的标签可以使用一个行空间移动元素。

CSS：

.wrapper
{
  width:70%;
  margin:0 auto; /* THIS IS WORKING FINE */
}

.custom_image
{
  float:left;
}
.custom_button
{
  background-color:#ff6600;
  border:2px; /* THIS IS NOT WORKING */
  border-color:#ccc; /* THIS IS NOT WORKING */
  padding:5px;
  margin:0 auto; /*THIS IS NOT WORKING */
}
.custom_text
{
  float:right;
}

HTML：

<div class="wrapper">
  <div class="custom_image"><img src="LOCATION"/></div>
  <div class="custom_button"><input type="submit" value="Submit"></div>
  <div class="custom_text">TEXTS</div>
</div>

Answer 1

<强>更新

你非常接近，你只需要从内部div中取出按钮并将文本放在包装器中心。试试这样：

HTML

<div class="wrapper">
  <input type="submit" value="Submit">
  <div class="custom_image"><img src="http://www.petside.com/sites/default/files/imagecache/thumbnail_50x50/grumpy_cat_photo.jpg"/></div>
  <div class="custom_text">TEXTS</div>
</div>

CSS

.wrapper {
    text-align:center;
    width:70%;
    margin:0 auto;
}
.custom_image {
  float:left;
}
.custom_text {
  float:right;
}

Demo

包含包装和浮动元素的CSS布局

1 个答案: