调整按钮标记内

时间:2015-04-30 21:21:08

标签: html css object button svg

我有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">&nbsp</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">&nbsp</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">&nbsp</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>

0 个答案:

没有答案