風格的網頁以無序的方式

我一直在嘗試用這個html頁格式化長時間。我想用漂亮的方式在屏幕中心看到這些。任何幫助表示讚賞。風格的網頁以無序的方式

* { 
    margin:0; 
    padding:0; 
    font-family: tahoma; 
} 
body { 
    padding: 30px; 
} 
#fileid{ 
width:10%; 
height:15%; 
} 
div { 
    width: 400px; 
    height: 25px; 
    background-color: white; 
    box-shadow: 1px 2px 3px #ededed; 
    position:relative; 
    border: 1px solid #d8d8d8; 
} 
input[type='file'] { 
    width:400px; 
    height:25px; 
    opacity:0 
} 
#val { 
    width: 400px; 
    height:25px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    font-size:13px; 
    line-height: 25px; 
    text-indent: 10px; 
    pointer-events: none; 
} 
#button { 
    cursor: pointer; 
    display: block; 
    width: 90px; 
    background-color: purple; 
    height:25px; 
    color: white; 
    position: absolute; 
    right:0; 
    top: 0; 
    font-size: 11px; 
    line-height:25px; 
    text-align: center; 
    -webkit-transition: 500ms all; 
    -moz-transition: 500ms all; 
    transition: 500ms all; 
} 

#button:hover { 
    background-color: blue; 
} 


body { 
    background-color: linen; 
} 

div{ 
    color: maroon; 
    margin-left: 40px; 
    font-size:100%; 
} 
#sid{ 
    color: maroon; 
    margin-left: 40px; 
    font-size:100%; 
}

HTML

<div align="center"> 
<b>Model</b><select id="sid"> 
<option >Average</option> 
<option>Sum</option> 
<option>Highest</option> 
</select><br> 
<div id="fileip"> 
    <input type='file'> <span id='val'></span> 
<span id='button'>Select File</span> 
</input> 
</div> 
<input type="submit" value="run"><br><br> 
<input type="submit" value="Display"><br> 
</div>

和的JavaScript

$('#button').click(function() { 
    $("input[type='file']").trigger('click'); 
}) 

$("input[type='file']").change(function() { 
    $('#val').text(this.value.replace(/C:\\fakepath\\/i, '')) 
})

的頁面應該看起來像

來源

2015-10-24 smraj

這是非常不清楚你想要什麼。請做一些劃傷，分享你想要的照片。 – Chris

你的CSS的div樣式的多重聲明使問題 – scoolnico

@scoolinico所以我應該刪除一個div – smraj

有兩個選項可以集中在我頭上。首先，修復寬度並設置邊距：0 auto;在你想要的中心元素上。二是擺位置：親戚;左：calc（50％ - YOURELEMENTWIDTH）;

來源

2015-10-24 10:49:26

使用<label>標記。

<body> 
 
    <label for="model">Model</label> 
 
<select id="model"> 
 
    <option>Average</option> 
 
    <option>Sum</option> 
 
    <option>Highest</option> 
 
    
 
</select> 
 
</body>

來源

2015-10-24 11:13:30

是的，我已經添加了標籤到我的代碼 – smraj

我的意思是提到問題 –

風格的網頁以無序的方式

回答

相關問題