0

レスポンシブデザインに取り組んでいると、順序付けされていないリストを除いて、すべてがレスポンシブであることに気付きました。ブラウザのサイズを変更すると、リストが移動しないか、DIVの中央に留まりません。私は一日中たくさんのことを試しましたが、それを理解することはできません。コンテキストでは、＃sitecontentはすべてを保持するコンテナーであり、＃sitecontent .leftsidebarには画像と順序付けられていないリストが含まれ、＃sitecontent.leftsidebarulは順序付けられていないリストです。誰かがそれをチェックして、何が悪いのか教えてもらえますか？http://www.tommaxwell.meの私のサイトにアクセスして、ソースを表示してください。

4

4 に答える 4

0

Try this CSS:

#sitecontent .leftsidebar ul {
position: relative;
top: -5px;
list-style-type: none;
font-family: 'Patua One', cursive;
padding-left: 10px;
}

#sitecontent .leftsidebar ul li {
margin-bottom: 3%;
clear: both;
border-bottom: 1px solid #E5E5E5;
font-family: helvetica;
text-align: center;
}
于 2012-11-21T03:33:54.483 に答える
0

Hi update your css with mine actually i have given the horizontal padding to your .leftsidebar ul parent div and made some changes in its list-items and its working fine now.. see the attached image for your reference :-

enter image description here

CSS for till IPad

#sitecontent .leftsidebar ul {
    padding: 0 25%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

#sitecontent .leftsidebar ul li {
    border-bottom: 1px solid #E5E5E5;
    display: block;
    font-family: helvetica;
    line-height: 25px;
    margin: 2px;
}

And for iphone you will have to write the css :-

image reference for iphone :- enter image description here

CSS for till IPhone

#sitecontent .leftsidebar ul {
    margin-top: 10%;
    margin-bottom:20%;
    position: relative;
}
于 2012-11-21T10:18:04.380 に答える
0

私のブラウザは、リストにパディングを追加しています。これは、ブラウザが行う非常に一般的なことです。リセット ( meyer、yui ) を使用するか、ul と li に明示的なパディング/マージンを設定することを検討してください。

于 2012-11-21T03:36:32.603 に答える