Не полная ширина css горизонтальное меню

Question

Относительно новизна к CSS, поэтому, пожалуйста, несите мою неопытность. Я пытаюсь создать меню, и после большого поиска и сравнения, чтения и копирования я в основном придумываю формат, который я хочу. Проблема в том, что я хочу, чтобы мое меню было шириной его содержимого, а не полной шириной, а приведенный ниже код (адаптированный из разных примеров) дает полное меню ширины. Я играл с вещами, но, похоже, не могу определить, что делает его полной шириной, или нет - возможно, для меня требуется более существенное переписывание.

В случае, если это помогает, то, что я хочу, представляет собой горизонтальное меню с внешней прямоугольной рамкой с шириной, определяемой его содержимым, а не автоматически полной шириной (или даже не автоматической шириной).

Это я впервые задал вопрос, поэтому заблаговременно за вашу помощь и терпение!

<style type="text/css"> 

*/#menu ul,#menu li,#menu a{ 
    list-style:none; 
    margin:0; 
    padding:0; 
    border:0; 
    font-family: Arial} 

#menu{ 
    border:1px solid #000000; 
    border-radius:5px} 

#menu ul{ 
    background:#ffffff; 
    padding:5px 10px; 
    border-radius:5px} 

#menu ul:before{ 
    content:''; 
    display:block} 

#menu ul:after{ 
    content:''; 
    display:block; 
    clear:both} 

#menu li{ 
    float:left; 
    margin:0px 0px 0px 0px; 
    border:0px} 

#menu li a{ 
    border-radius:5px; 
    padding:5px 10px 5px; 
    display:block; 
    text-decoration:none; 
    text-align:center; 
    color:#000000; 
    border:0px; 
    font-size:15px} 

</style> 

<div id="menu"> 
    <ul> 
     <li><a href="#"><span>Link1</span></a></li> 
     <li><a href="#"><span>Link2</span></a></li> 
     <li><a href="#"><span>Link3</span></a></li> 
     <li><a href="#"><span>Link4</span></a></li> 
    </ul> 
</div> 

Answer 1

ul являются уровня блока элементы так, 100% в ширину по умолчанию.

Сделайте изображение ul как inline-block, и оно упадет до его ширины.

Добавить text-align родительскому объекту при необходимости. Здесь я использовал center.

#menu ul, 
 
#menu li, 
 
#menu a { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    font-family: Arial 
 
} 
 
#menu { 
 
    border: 1px solid #000000; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
} 
 
#menu ul { 
 
    display: inline-block; 
 
    background: lightblue; 
 
    padding: 5px 10px; 
 
    border-radius: 5px 
 
} 
 
#menu ul:before { 
 
    content: ''; 
 
    display: block 
 
} 
 
#menu ul:after { 
 
    content: ''; 
 
    display: block; 
 
    clear: both 
 
} 
 
#menu li { 
 
    float: left; 
 
    margin: 0px 0px 0px 0px; 
 
    border: 0px 
 
} 
 
#menu li a { 
 
    border-radius: 5px; 
 
    padding: 5px 10px 5px; 
 
    display: block; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    color: #000000; 
 
    border: 0px; 
 
    font-size: 15px 
 
}

<div id="menu"> 
 
    <ul> 
 
    <li><a href="#"><span>Link1</span></a> 
 
    </li> 
 
    <li><a href="#"><span>Link2</span></a> 
 
    </li> 
 
    <li><a href="#"><span>Link3</span></a> 
 
    </li> 
 
    <li><a href="#"><span>Link4</span></a> 
 
    </li> 
 
    </ul> 
 
</div>