在文本周围包裹div（创建一个按钮）CSS

Question

我是网页设计的初学者，我根本无法在网上找到一种方法来围绕某些文字包装div来创建一个按钮（我希望div具有固定的高度，并且宽度可以变化依赖于班级的内容）。 这是我试图获得的：

（上图是在photoshop中制作的）

这是发生的事情：

这是代码（HTML和CSS）

<div id="menu">
<font color="white">

        <div class="button">
        Home
        </div>
        <div class="button">
        Image Gallery
        </div>

</font>
</div>

#menu{
 height:30px;
 width:980px;
 background-color:#132f74;
 border-top: 1px solid white;
 border-bottom: 1px solid white;
}

.button{
  background-color: #132f74;
  width:auto;
  height:30px;
  font-family:calibri;
  font-size:22px;
}

我该怎么做才能获得流体宽度效果？

Answer 1

在您的.button课程中添加填充，并将display:设置为inline-block，如下所示：

.button {
    padding: 5px 10px;
    display: inline-block;
}

希望这有帮助。

Answer 2

你得到的是非常好的。我会使用float:left和padding-right的组合使其适合一行。或者，您也可以使用:after访问者和content CSS属性包含一个小分隔符。

#menu{
 height:30px;
 width:980px;
 background-color:#132f74;
 border-top: 1px solid white;
 border-bottom: 1px solid white;
 clear:both;
}

.button{ 
  background-color: #132f74;
  width:auto;
  height:30px;
  font-family:calibri;
  font-size:22px;
  float: left;
  padding-right: 10px;
}

/* optional - display a separator */
.button:not(:last-child):after {
  content: '|';
}

Answer 3

将display: inline-block和margin: 5px添加到.buttons;和height: 40px到#menu：

Demo

#menu {
    height:40px;
    width:980px;
    background-color:#1127ff;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}
.button {
    display: inline-block;
    background-color: #132f74;
    height:30px;
    font-family:calibri;
    font-size:22px;
    padding: 5px;
}

我更改了background-color的{​​{1}}以显示差异。

Answer 4

.button{
  background-color: #132f74;
  width:auto;
  height:30px;
  font-family:calibri;
  font-size:22px;
  padding: 0px 5px 0px 0px;
  display: inline-block;
}

http://jsfiddle.net/e6y44f7n/

Answer 5

希望这是你一直在寻找的......

＆＃13;

＆＃13;

* {
    margin:0;
    padding:0px;
}

#header {
    width:100%;
    height:80px;
    background:#132f74;
}

#menu{
 color:#fff;
 display:inline;
 position:absolute;
 width:100%;
 background:#132f74;
 z-index:2;
 border-top: 1px solid white;
}

.button{
  display:inline-block;
  background-color:#132f74;
  height:30px;
  padding-left:10px;
  padding-right:10px;
  font-family:calibri;
  font-size:22px;
}

.button:hover {
    background:#081533;
}

a {
    text-decoration:none;
    color: #fff;
}

＆＃13;

<div id="header"></div>
<div id="menu">
    <div class="button">
        <a href="#">Home</a>
    </div>
    <div class="button">
        <a href="#">Image Gallery</a>
    </div>
    <div class="button">
        <a href="#">Example</a>
    </div>
    <div class="button">
        <a href="#">Another Long Example</a>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;