Question

这是我的代码，我试图并行放置3个按钮。

<!DOCTYPE html>
<html>
<head>
<div class="aParent">
 <div id="left_side">
   <form accept-charset="UTF-8" action="/new" data-remote="true" method="get"><div    style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
   <label for="q">Make A new folder:</label><br>
   <input id="q" name="q" type="text" /><br>
   <input name="commit" type="submit" value="Submit" />
   </form></div>
<div id="centre">
    <input id="btn" type="button" value="Save" action="update" alignment="center" />
</div>
<div id="right_side">
 <form accept-charset="UTF-8" action="/target" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
 <input name="commit" type="submit" value="Customize Weight" />
</form></div>
</div>

 <style type="text/css">

  #left_side {
  float: left;
    }

  #center_s {
   margin:50px 50px;
   width: 65px;
    }

  #right_side {
   float: right;
    }


     </style>

现在，如果我更改边距值，保存按钮位置不会改变。任何猜测都要做出改变以平行放置3个按钮。

Answer 1

添加：

 #centre{ float:left;}

如果您希望将此div居中，则需要添加适当的margin-left值，只要您的父容器具有固定宽度。

Answer 2

将display:inline-block添加到所有三个容器div并删除float属性。

#left_side {
    display: inline-block;
}

#center_s {
    margin: 50px 50px;
    width: 65px;
    display: inline-block;
}

#right_side {
    background: Green;
    display: inline-block;
}

Js Fiddle Example

你有一些复杂的html结构来做这个简单的事情，因为你可以在不使用css的情况下实现，只需要像这样放置简单的标记

<div class="aParent">
<form accept-charset="UTF-8" action="/new" data-remote="true" method="get">
    <div id="label">
            <label for="q">Make A new folder:</label>
    </div>
    <div id="input-control">
            <input id="q" name="q" type="text" />
    </div>
    <div id="button-control">
            <input name="commit" type="submit" value="Submit" />
            <input id="btn" type="button" value="Save" action="update" alignment="center" />
            <input name="commit" type="submit" value="Customize Weight" />
    </div>
    </form>
</div>

Js Fiddle - Simple design

Answer 3

你能把所有3个div {float：left}放一个然后加一个小边距来分隔它们吗？

Answer 4

您有两种选择：

1.您可以浮动想要定位的元素。在css代码中添加一行，例如

#center_s {
margin: 50px 50px;
width: 65px;
float: left; 
}

这会将元素模型从框更改为内联。

使用float会将元素堆叠在一起。

你可以阅读这篇关于浮动属性的文章 - http://css-tricks.com/all-about-floats/

您可以将显示属性更改为inline-block - 为所有三个元素添加新的css属性 - display: inline block;。

这会将div从块模型更改为内联模型！关于展示属性的另一篇很棒的文章 - http://www.impressivewebs.com/difference-block-inline-css/

希望这能回答你的问题。

并排3个按钮

4 个答案: