Question

我正在创建一个包含三个div的按钮。第一个div有左角图像，第二个div在中间有一个图像，它被拉伸取决于文本宽度，然后右边的div有右角图像。

这是如何制作的

Sample button

这是JsFiddle code我正在尝试创建一个按钮。但是div没有正确显示。如果我简单地将图像放在一起而没有div，那么我可以看到图像。任何人都可以告诉我如何制作一个有三个div的按钮？我不是一个前端开发人员，但是这个东西出现在我的项目中，我必须处理这个问题。感谢

<div class="container" >

        <div  id='leftdiv'><img src="http://i.share.pho.to/ff6cc4e3_o.png"></div>
        <div  id='backgrounddiv'>Click me<img src="http://i.share.pho.to/0ffe9c14_o.png"></div>
        <div  id='rightdiv'><img src="http://i.share.pho.to/245be416_o.png"></div>

    </div>

Answer 1

你需要改变你的css并使用图像背景为具有文本的中间div

#container{
  display:inline-block;
}
#leftdiv{
  float:left;
}
#backgrounddiv{
  background:url("http://i.share.pho.to/0ffe9c14_o.png") top center repeat-x;
  float:left;
  height:70px;
  padding:10px;
  line-height:70px;
}
#rightdiv{
   float:left;
}

请参阅固定代码：http://jsbin.com/tuzipiyupo/4/edit

Answer 2

只需从style="visibility:hidden"

中删除<div class="container" style="visibility:hidden">即可

这会隐藏你的div。

点击此处Fiddle。

修改：

HTML：

<div class="container" id="button">

   <div  id='leftdiv'><img src="http://i.share.pho.to/ff6cc4e3_o.png"/></div>
    <div  id='backgrounddiv'>CLick Me </div>
    <div  id='rightdiv'><img src="http://i.share.pho.to/245be416_o.png"/></div>

    </div>

<强> CSS：

.container{
  display:inline-block;
}


#leftdiv{
  float:left;
}
#backgrounddiv{
  background:url("http://i.share.pho.to/0ffe9c14_o.png") top center repeat-x;
  float:left;
  height:70px;
  padding:10px;
  line-height:70px;
}
#rightdiv{
   float:left;
}

<强>脚本

document.getElementById("button").onclick = function(){
    alert("click");
}

http://jsfiddle.net/a19fm2hn/9/

Answer 3

删除

风格=＆＃34;能见度：隐藏＆＃34;

来自父div的

行。为什么使用div作为按钮功能。

Answer 4

Hi I have updated your code Here is the link : http://jsfiddle.net/Maheshkonduru/a19fm2hn/10/

Css
#backgrounddiv{
  background:url("http://i.share.pho.to/0ffe9c14_o.png") top center repeat-x;
  height:70px;
  padding:10px;
  line-height:70px;
    cursor:pointer;
}

.container > div {
    float: left;
    display:block
}

#leftdiv {

    float: left;
    width: 25px;
}

HTML
<div class="container">       
        <div  id='leftdiv'><img src="http://i.share.pho.to/ff6cc4e3_o.png"></div>
        <div  id='backgrounddiv'>Click me</div>
        <div  id='rightdiv'><img src="http://i.share.pho.to/245be416_o.png"></div>

    </div>

Answer 5

虽然您已经（在撰写本文时）接受了另一个答案，但我建议采用以下方法（如果您必须使用图片）：

＆＃13;

button {
  width: 500px;
  /* using the 'main' background as the background-image: */
  background-image: url(http://i.share.pho.to/0ffe9c14_o.png);
  /* repeating horizontally */
  background-repeat: repeat-x;
  /* removing the default border, padding and margin: */
  border-width: 0;
  padding: 0;
  margin: 0;
  /* setting the line-height, and height, equal to the
     the height of the images we're using, to vertically
     center the text within the button: */
  line-height: 90px;
  height: 90px;
}

/* using CSS pseudo-elements to insert the left, and
   right, images: */
button::before {
  content: url(http://i.share.pho.to/ff6cc4e3_o.png);
  float: left;
}
button::after {
  content: url(http://i.share.pho.to/245be416_o.png);
  float: right;
}

＆＃13;

<button>Click here</button>

＆＃13;

使用Div创建按钮

5 个答案: