我有3个社交按钮位于此声音播放器的底部。我似乎无法使SVG(<object>
内部)调整对象和按钮的大小以适应SVG。我真的不想破解它并用填充,边距等抵消。
提前感谢您的帮助!
/* Fonts */
@import url("../fonts/nivo/stylesheet.css");
body {
background: #F5F4EF url('../images/smbg.png');
}
/* Media container */
#outer_container {
background: #fff;
padding: 12px 14px 12px 14px;
border-radius: 5px;
}
#inner_container {
background: #fff;
border: 1px solid #eee;
box-shadow: 0px 0px 25px -5px rgba(0,0,0,0.5);
display: table;
position: relative;
width: 100%;
}
.start {
display: table-cell;
vertical-align: middle;
margin: 0 auto;
text-align: center;
width: 8%;
border-right: 1px solid rgba(162, 162, 162, .5);
}
.player {
width: 100%;
margin-left: 2px;
}
button {
color: #000;
background-color: #fff;
border-color: #eee;
display: inline-block;
margin-bottom: 5px;
width: 70px;
height: 30px;
cursor: default;
border: none;
text-decoration: none;
appearance: none;
outline: none;
}
#media-title {
font-family: "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
letter-spacing: 1px;
color: #414042;
width: 100%;
display: block;
vertical-align: middle;
padding-bottom: 5px;
padding-top: 5px;
position: relative;
}
.empty_space {
float: left;
display: inline-block;
height: 100%;
width: 2px;
vertical-align: middle;
text-align: center;
}
a.sound_name {
color: #888888;
text-decoration: none;
font-weight: 200;
&:hover {
color: #000000;
text-decoration: none;
}
}
#media-type {
right: 0;
position: absolute;
}
object {
}
.object_social {
display: inline;
position: relative;
left: 0;
}
<div id="inner_container">
<!-- Play button -->
<div class="start">
<object class="play_button" id="play" type="image/svg+xml" data="images/play_button.svg">
Play
</object>
</div>
<!-- Waveform and Assorted Content -->
<div class="player">
<!-- empty padding space -->
<div class="empty_space"> </div>
<div id="media-title">
<a class="sound_name" href="#">Collection Name</a> - <strong>Kick Loop 1</strong>
<div id="media-type">
<object class="sound_type" type="image/svg+xml" data="images/SoundType/loop.svg">
</object>
</div>
</div>
<div id="waveform">
<!-- empty padding space -->
<div class="empty_space"> </div>
<div class="progress progress-striped active" id="progress-bar">
<div class="progress-bar progress-bar-info"></div>
</div>
<!-- Here be the waveform -->
</div>
<div class="button_social">
<!-- empty padding space -->
<div class="empty_space"> </div>
<button>
<object class="object_social" type="image/svg+xml" data="images/like_button.svg">
</object>
</button>
<button>
<object class="object_social" type="image/svg+xml" data="images/bucket_button.svg">
</object>
</button>
<button>
<object class="object_social" type="image/svg+xml" data="images/share_button.svg">
</object>
</button>
</div>
</div>
<!-- End Waveform and Assorted Content -->
</div>