두 버튼을 나란히 정확하게 추가하는 방법을 파악하려고합니다. 버튼은 사용자가 클릭 한 이미지이며 URL로 이동합니다. 인라인 표시가있는 CSS에 클래스를 추가하고 추가 된 스타일 태그가있는 버튼에 해당 클래스를 호출하는 HTML을 추가했습니다. 버튼을 표시하지 않습니다.이미지로 구성된 두 개의 버튼을 나란히 추가하려면 어떻게합니까?
버튼을 나란히 배치해야한다면 HTML 코드에 직접 스타일 태그를 추가하지 않고 어떻게해야하는지 확신 할 수 없습니다. 그것이 내가 디스플레이와 함께 어떻게 해야할지를 아는 유일한 방법입니다 : 인라인; 여기
내가 그 일을하고 어떻게 : 이것은 당신에 대한 가능한 경우 확실하지, 더 잘 작동 할 수
<a class="storebtns" href="http://www.google.com" style="background-image: url(/img/btn.png);"></a>
이것은 더 잘 작동 할 수 있습니다. 여기
.storebtns
{
float:left;
width:100px;
}
<a class="storebtns" href="http://www.google.com">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSUZXG8Fd-auKjn_fLKsFtHMIarXLlcnDoTAvV86PSxmJFLwYgzJQ" width="100"/>
</a>
<a class="storebtns" href="http://www.stackoverflow.com">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSHUhwMHx9nciceUQQ5X5Id7pK9pFeAXPRVc0BhunO5zt49OvNiag" width="100" />
</a>
은 작업 예 ul를 사용하여 플로팅 및 CSS 백그라운드 이미지를 추가 버튼을 추가 Here
CSS
.storebtns {
display: inline;
}
HTML.
<a class="storebtns" href="http://www.google.com">
<img src="/img/btn.png" />
</a>
:
<a class="storebtns" href="#"></a>
과 :
.storebtns {
padding:100%;
background:url("IMAGE_PATH_HERE");
}
시도이다. 여기
<body>
<h1>Click on a kitty.</p>
<div id="buttons">
<ul>
<li><a href="#">Button1</a></li>
<li><a href="#">Button2</a></li>
</ul>
</div><!--end buttons-->
</body>
는 CSS입니다 :
ul li{
float:left;
list-style-type:none;
}
ul li a{
padding:40px;
text-decoration:none;
text-indent:-9999px;
background:url(img.jpg) no-repeat;
opacity:0.5;
display:inline-block;
}
ul li a:hover{
opacity:1.0;
}
내가 이것을 사용하여 결국 그것은 유일한 문제는 버튼 링크 역할을하지 않는 것입니다, 잘 작동합니다. 커서를 클릭 할 수 없으며 마우스를 가져 가면 커서가 바뀌지 않습니다. – user1632018