0

这是我试图并行放置 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 个按钮的猜测。

4

4 回答 4

1

添加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

于 2013-09-25T13:36:03.070 回答
1

添加这个：

 #centre{ float:left;}

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

于 2013-09-25T13:28:42.220 回答
0

您可以将所有 3 个 div {float: left} 都放入，然后为它们添加一个小边距以将它们分开吗？

于 2013-09-25T13:29:09.167 回答
0

为此，您有两种选择：

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

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

这会将元素模型从 box 更改为 inline。

使用float会将元素彼此相邻堆叠。

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

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

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

希望这回答了你的问题。

于 2013-09-25T13:52:39.607 回答